/* ============================================================
   FAIL Portal — Design Tokens
   v1.0 · Dark navy · gold · warm beige · modern editorial
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- BRAND · INK (dark blue) ---------- */
  /* The core of the brand. Used on sidebars, headings, chrome. */
  --fail-ink-50:   #EEF0F6;
  --fail-ink-100:  #D6DAE6;
  --fail-ink-200:  #A7AFC7;
  --fail-ink-300:  #6E78A0;
  --fail-ink-400:  #3D4874;
  --fail-ink-500:  #212B55;
  --fail-ink-600:  #161E44;
  --fail-ink-700:  #0F1735;   /* Sidebar / topbar */
  --fail-ink-800:  #0A1128;   /* Primary ink */
  --fail-ink-900:  #060A1C;

  /* ---------- BRAND · GOLD (mustard/yellow) ---------- */
  --fail-gold-50:  #FBF5DA;
  --fail-gold-100: #F6E7A3;
  --fail-gold-200: #EFD35C;
  --fail-gold-300: #E6BE23;
  --fail-gold-400: #D2A90F;   /* Primary accent on light */
  --fail-gold-500: #B08B00;
  --fail-gold-600: #8A6D00;
  --fail-gold-700: #604C00;

  /* ---------- BRAND · SAND (warm beige / paper) ---------- */
  --fail-sand-50:  #FBF8F1;
  --fail-sand-100: #F6F0E3;   /* Page background */
  --fail-sand-200: #EFE6CE;
  --fail-sand-300: #E4D6B2;
  --fail-sand-400: #C9B78C;
  --fail-sand-500: #A89770;

  /* ---------- NEUTRAL (cool for UI surfaces) ---------- */
  --fail-gray-0:   #FFFFFF;
  --fail-gray-50:  #F9F9F7;
  --fail-gray-100: #F2F2EF;
  --fail-gray-200: #E6E5E0;
  --fail-gray-300: #D2D1CA;
  --fail-gray-400: #A3A29A;
  --fail-gray-500: #6E6D66;
  --fail-gray-600: #4A4A45;
  --fail-gray-700: #2E2E2B;
  --fail-gray-800: #1A1A18;

  /* ---------- SIGNAL ---------- */
  --fail-success-50:  #E9F6EC;
  --fail-success-400: #3FA55F;
  --fail-success-600: #1F7A3F;
  --fail-warn-50:     #FFF4D6;
  --fail-warn-400:    #E5B100;
  --fail-warn-600:    #8A6D00;
  --fail-danger-50:   #FBE7E7;
  --fail-danger-400:  #E55353;
  --fail-danger-600:  #B12727;
  --fail-info-50:     #E6EEFB;
  --fail-info-400:    #3D7AE3;
  --fail-info-600:    #1E4DA8;

  /* ============================================================
     SEMANTIC — LIGHT
     ============================================================ */

  /* Surfaces */
  --bg-page:       var(--fail-sand-100);   /* warm beige page */
  --bg-surface:    var(--fail-gray-0);      /* primary card */
  --bg-surface-2:  var(--fail-sand-50);     /* secondary card / muted */
  --bg-inset:      var(--fail-gray-100);    /* inputs, wells */
  --bg-raised:     var(--fail-gray-0);
  --bg-inverse:    var(--fail-ink-700);     /* dark bars, topbar */
  --bg-editorial:  var(--fail-sand-100);
  --bg-code:       #FAF6EC;                 /* code / prompt well */

  /* Foregrounds */
  --fg-default:     var(--fail-ink-800);
  --fg-muted:       var(--fail-ink-400);
  --fg-subtle:      var(--fail-ink-300);
  --fg-on-inverse:  var(--fail-sand-100);
  --fg-on-accent:   var(--fail-ink-800);   /* gold bg → ink text */
  --fg-link:        var(--fail-ink-600);

  /* Borders */
  --border-default: rgba(10, 17, 40, 0.10);
  --border-strong:  rgba(10, 17, 40, 0.20);
  --border-subtle:  rgba(10, 17, 40, 0.06);
  --border-focus:   var(--fail-gold-400);

  /* Accents */
  --accent-primary:       var(--fail-gold-400);   /* gold */
  --accent-primary-hover: var(--fail-gold-500);
  --accent-primary-fg:    var(--fail-ink-800);
  --accent-ink:           var(--fail-ink-700);    /* secondary (dark btn) */
  --accent-ink-fg:        var(--fail-sand-100);

  /* Status */
  --status-info-bg:    #EEF3FD;
  --status-info-fg:    var(--fail-info-600);
  --status-success-bg: #E7F5EB;
  --status-success-fg: var(--fail-success-600);
  --status-warn-bg:    #FFF4D6;
  --status-warn-fg:    var(--fail-warn-600);
  --status-danger-bg:  #FBE7E7;
  --status-danger-fg:  var(--fail-danger-600);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  /* Display: Instrument Sans — geometric grotesque, excellent diacritics
     Body:    Inter — modern, technical, Czech-safe
     Mono:    JetBrains Mono — code + prompts
     (Matches the portal's next/font/google setup: Inter + Instrument Sans) */
  --font-display: "Instrument Sans", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale (compact, technical) */
  --fs-eyebrow:    11px;
  --fs-caption:    12px;
  --fs-body-sm:    13px;
  --fs-body:       15px;
  --fs-body-lg:    17px;
  --fs-h6:         16px;
  --fs-h5:         19px;
  --fs-h4:         22px;
  --fs-h3:         28px;
  --fs-h2:         36px;
  --fs-h1:         48px;
  --fs-display:    72px;

  --lh-tight:      1.08;
  --lh-snug:       1.25;
  --lh-normal:     1.45;
  --lh-relaxed:    1.6;
  --lh-loose:      1.75;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  --ls-eyebrow:    0.14em;
  --ls-tight:      -0.01em;
  --ls-display:    -0.03em;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 1px rgba(10,17,40,0.04);
  --shadow-sm: 0 1px 2px rgba(10,17,40,0.05), 0 1px 1px rgba(10,17,40,0.03);
  --shadow-md: 0 4px 12px -2px rgba(10,17,40,0.08), 0 2px 4px -1px rgba(10,17,40,0.04);
  --shadow-lg: 0 12px 32px -8px rgba(10,17,40,0.14), 0 4px 8px -2px rgba(10,17,40,0.06);
  --shadow-xl: 0 24px 60px -12px rgba(10,17,40,0.22), 0 8px 16px -4px rgba(10,17,40,0.08);
  --shadow-ring-focus: 0 0 0 3px rgba(210,169,15,0.35);
  --shadow-inset-soft: inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --dur-slower: 420ms;
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 840px;
  --container-lg: 1040px;
  --container-xl: 1240px;
  --sidebar-w:    264px;
  --topbar-h:     56px;

  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  1000;
  --z-modal:    1100;
  --z-toast:    1200;
}

/* ============================================================
   DARK THEME — flip semantic tokens only
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page:       var(--fail-ink-800);
  --bg-surface:    var(--fail-ink-700);
  --bg-surface-2:  var(--fail-ink-600);
  --bg-inset:      var(--fail-ink-800);
  --bg-raised:     var(--fail-ink-600);
  --bg-inverse:    var(--fail-sand-100);
  --bg-editorial:  var(--fail-ink-700);
  --bg-code:       #0A1225;

  --fg-default:    var(--fail-sand-100);
  --fg-muted:      var(--fail-ink-200);
  --fg-subtle:     var(--fail-ink-300);
  --fg-on-inverse: var(--fail-ink-800);
  --fg-on-accent:  var(--fail-ink-800);
  --fg-link:       var(--fail-gold-300);

  --border-default: rgba(246, 240, 227, 0.10);
  --border-strong:  rgba(246, 240, 227, 0.20);
  --border-subtle:  rgba(246, 240, 227, 0.06);

  --accent-primary:       var(--fail-gold-300);
  --accent-primary-hover: var(--fail-gold-200);
  --accent-primary-fg:    var(--fail-ink-800);

  --status-info-bg:    rgba(61,122,227,0.14);
  --status-info-fg:    #9FBEF5;
  --status-success-bg: rgba(63,165,95,0.14);
  --status-success-fg: #8CD6A2;
  --status-warn-bg:    rgba(229,177,0,0.14);
  --status-warn-fg:    #F2D56A;
  --status-danger-bg:  rgba(229,83,83,0.14);
  --status-danger-fg:  #F29494;

  --shadow-xs: 0 1px 1px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,0.50);
  --shadow-xl: 0 24px 60px -12px rgba(0,0,0,0.60);
  --shadow-ring-focus: 0 0 0 3px rgba(230,190,35,0.45);
}