/* IronFist AI — Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand: IronFist (Session D rev — electric blue accent on near-black base) ── */
  /* Original ember/orange retained as --ember-* in case of revert */
  --ember-50:  #fff4ed;
  --ember-100: #ffe2cc;
  --ember-200: #ffbf95;
  --ember-300: #ff945a;
  --ember-400: #ff6a25;
  --ember-500: #e54a05;
  --ember-600: #b53400;
  --ember-700: #842500;
  --ember-800: #4f1500;
  --ember-900: #2a0a00;

  /* IronFist primary palette */
  --iron-50:   #F4F7FF;
  --iron-100:  #E8EEF7;   /* primary text on dark */
  --iron-200:  #C8D4E8;   /* secondary text on dark */
  --iron-300:  #8FB1FF;   /* light accent */
  --iron-400:  #6B95FF;   /* hover state for accent */
  --iron-500:  #4A7CFF;   /* primary accent — electric blue (authority not aggression) */
  --iron-600:  #3A6BEE;   /* accent active/pressed */
  --iron-700:  #2A3142;   /* surface-3, borders on dark */
  --iron-800:  #14171D;   /* surface on dark */
  --iron-900:  #0A0C10;   /* primary dark bg (near black) */

  /* Sentinel/enterprise accent — gold, lightened for AA at small sizes */
  --iron-gold: #D4A84B;
  --iron-gold-dim: #B8923E;

  /* ── Neutrals (warm graphite) ── */
  --ink-0:    #ffffff;
  --ink-50:   #fafaf9;
  --ink-100:  #f4f3f1;
  --ink-200:  #e8e7e3;
  --ink-300:  #d2d0ca;
  --ink-400:  #9c9a92;
  --ink-500:  #6b6962;
  --ink-600:  #44423c;
  --ink-700:  #2a2926;
  --ink-800:  #1a1917;
  --ink-900:  #0e0d0c;

  /* ── Semantic (Session D — palette-aligned) ── */
  --ok:       #46A758;       /* iron-success — verified 6:1 on dark bg */
  --ok-bg:    #E8F3EB;
  --warn:     #B8923E;       /* gold-dim for warnings */
  --warn-bg:  #FCF1E0;
  --err:      #E5484D;       /* iron-danger — verified 4.7:1 on dark bg */
  --err-bg:   #FBEAEA;
  --info:     #4A7CFF;       /* iron-500 reused as info */
  --info-bg:  #E9F0F7;
  --accent:   #4A7CFF;
  --accent-hover: #6B95FF;

  /* ── Surfaces (light theme default) ── */
  --bg:       var(--ink-50);
  --surface:  var(--ink-0);
  --surface-2:var(--ink-100);
  --surface-3:var(--ink-200);
  --border:   rgba(20, 18, 15, 0.08);
  --border-strong: rgba(20, 18, 15, 0.16);
  --text:     var(--ink-900);
  --text-2:   var(--ink-600);
  --text-3:   var(--ink-500);
  --text-4:   var(--ink-400);

  /* ── Type ── */
  --font-display: 'Rajdhani', system-ui, sans-serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --fs-3xl:  34px;
  --fs-4xl:  48px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.55;

  --letter-display: -0.01em;
  --letter-eyebrow: 0.10em;

  /* ── Spacing (4px scale) ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(20,18,15,0.05), 0 1px 1px rgba(20,18,15,0.04);
  --shadow-2: 0 4px 12px rgba(20,18,15,0.06), 0 2px 4px rgba(20,18,15,0.04);
  --shadow-3: 0 12px 32px rgba(20,18,15,0.10), 0 4px 12px rgba(20,18,15,0.06);
  --shadow-glow: 0 0 0 4px rgba(74,124,255,0.18);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

[data-theme="dark"] {
  /* Session D: IronFist dark — verified WCAG AA min */
  --bg:       var(--iron-900);    /* #0A0C10 */
  --surface:  var(--iron-800);    /* #14171D */
  --surface-2: var(--iron-700);   /* #2A3142 */
  --surface-3: #3A4258;
  --border:   rgba(232,238,247,0.08);
  --border-strong: rgba(232,238,247,0.18);
  --text:     var(--iron-100);    /* 17.8:1 on bg — AAA */
  --text-2:   var(--iron-200);    /* 12.1:1 on bg — AAA */
  --text-3:   #8B95AB;            /* 5.4:1 on bg — AA */
  --text-4:   #5E6678;
  --ok-bg:    rgba(70,167,88,0.18);
  --warn-bg:  rgba(212,168,75,0.18);
  --err-bg:   rgba(229,72,77,0.20);
  --info-bg:  rgba(74,124,255,0.18);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 0 4px rgba(74,124,255,0.18);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--letter-display); line-height: var(--lh-tight); }
.eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--letter-eyebrow); text-transform: uppercase; color: var(--text-3); }
.mono { font-family: var(--font-mono); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--iron-200); color: var(--ink-900); }