/* ==========================================================================
   GATE PASS — Design Tokens (v2: Vercel-style monochrome)
   Pure grayscale + a single blue accent. Hairline borders, no heavy shadows,
   sharp radii, tight type scale. Variable NAMES are preserved from v1 so the
   rest of the stylesheets keep working — only the VALUES changed.
   ========================================================================== */

:root {
  /* ============================================================
     CORE SCALE — Vercel-style grayscale (Geist palette)
     ============================================================ */
  --gray-0:    #ffffff;
  --gray-50:   #fafafa;
  --gray-100:  #f5f5f5;
  --gray-200:  #eaeaea;   /* canonical hairline border */
  --gray-300:  #d4d4d4;
  --gray-400:  #a3a3a3;
  --gray-500:  #737373;
  --gray-600:  #525252;
  --gray-700:  #404040;
  --gray-800:  #262626;
  --gray-900:  #171717;
  --gray-1000: #000000;

  /* Single accent — Vercel blue. Used sparingly: links, focus, primary on dark surfaces. */
  --blue-500:  #0070f3;
  --blue-600:  #0061d5;
  --blue-50:   #e6f0ff;

  /* ============================================================
     LEGACY BRAND TOKEN NAMES — remapped to monochrome.
     Other stylesheets reference --color-primary-* and --color-accent-*;
     keeping the names lets us migrate incrementally.
     ============================================================ */
  --color-primary:       var(--gray-1000);
  --color-primary-50:    var(--gray-50);
  --color-primary-100:   var(--gray-100);
  --color-primary-200:   var(--gray-200);
  --color-primary-300:   var(--gray-300);
  --color-primary-400:   var(--gray-400);
  --color-primary-500:   var(--gray-500);
  --color-primary-600:   var(--gray-600);
  --color-primary-700:   var(--gray-700);
  --color-primary-800:   var(--gray-900);
  --color-primary-900:   var(--gray-1000);
  --color-primary-950:   var(--gray-1000);

  /* Accent was gold — now pure black (primary button). Blue reserved for links. */
  --color-accent:        var(--gray-1000);
  --color-accent-50:     var(--gray-50);
  --color-accent-100:    var(--gray-100);
  --color-accent-200:    var(--gray-200);
  --color-accent-300:    var(--gray-700);
  --color-accent-400:    var(--gray-800);
  --color-accent-500:    var(--gray-1000);
  --color-accent-600:    var(--gray-900);
  --color-accent-700:    var(--gray-800);
  --color-accent-800:    var(--gray-700);

  /* ============================================================
     STATUS — kept saturated but flatter (Vercel uses real color for state)
     ============================================================ */
  --color-success:       #0d9d58;
  --color-success-bg:    #ecfdf3;
  --color-success-border:#a7f3d0;
  --color-warning:       #d97706;
  --color-warning-bg:    #fffbeb;
  --color-warning-border:#fde68a;
  --color-danger:        #e00;
  --color-danger-bg:     #fff0f0;
  --color-danger-border: #ffd6d6;
  --color-info:          var(--blue-500);
  --color-info-bg:       var(--blue-50);
  --color-info-border:   #bfdbfe;

  --color-allow:         var(--color-success);
  --color-allow-bg:      var(--color-success-bg);
  --color-allow-border:  var(--color-success-border);
  --color-deny:          var(--color-danger);
  --color-deny-bg:       var(--color-danger-bg);
  --color-deny-border:   var(--color-danger-border);
  --color-warn:          var(--color-warning);
  --color-warn-bg:       var(--color-warning-bg);
  --color-pending:       var(--gray-600);
  --color-pending-bg:    var(--gray-100);

  /* ============================================================
     NEUTRAL aliases (legacy)
     ============================================================ */
  --color-neutral-0:    var(--gray-0);
  --color-neutral-50:   var(--gray-50);
  --color-neutral-100:  var(--gray-100);
  --color-neutral-200:  var(--gray-200);
  --color-neutral-300:  var(--gray-300);
  --color-neutral-400:  var(--gray-400);
  --color-neutral-500:  var(--gray-500);
  --color-neutral-600:  var(--gray-600);
  --color-neutral-700:  var(--gray-700);
  --color-neutral-800:  var(--gray-800);
  --color-neutral-900:  var(--gray-900);

  /* ============================================================
     SEMANTIC SURFACES
     ============================================================ */
  --surface-page:        var(--gray-0);          /* pure white page */
  --surface-raised:      var(--gray-0);
  --surface-sunken:      var(--gray-50);
  --surface-border:      var(--gray-200);        /* the hairline */
  --surface-border-strong: var(--gray-300);

  --text-primary:        var(--gray-1000);
  --text-secondary:      var(--gray-600);
  --text-muted:          var(--gray-500);
  --text-inverse:        var(--gray-0);

  /* ------------------------------------------------------------------
     MONOCHROME BRAND — read before recoloring (C5).
     Gate Pass is intentionally black/white. Every "brand"/"accent"/
     "primary" token below resolves to a gray; there is NO navy or gold
     despite older comments. The ONLY non-grayscale chrome is --link
     (blue). To recolor the brand you must change these aliases here —
     editing a single token elsewhere will do nothing, because they all
     point at the gray ramp. Kept as separate names only for историical
     call-sites; treat them all as synonyms for "ink".
     ------------------------------------------------------------------ */
  /* Action accent = black on white. Hover darkens slightly. */
  --accent:              var(--gray-1000);
  --accent-hover:        var(--gray-800);
  --accent-active:       var(--gray-700);
  --accent-light:        var(--gray-100);
  --accent-on:           var(--gray-0);          /* white text on black */

  /* Brand surfaces — same as accent in mono system */
  --brand:               var(--gray-1000);
  --brand-hover:         var(--gray-800);
  --brand-light:         var(--gray-50);

  /* Link blue (the ONLY non-grayscale chrome color) */
  --link:                var(--blue-500);
  --link-hover:          var(--blue-600);

  /* ============================================================
     SIDEBAR — Light + hairline (was navy). Desktop only.
     ============================================================ */
  --sidebar-bg:          var(--gray-0);
  --sidebar-bg-deep:     var(--gray-50);
  --sidebar-border:      var(--gray-200);
  --sidebar-text:        var(--gray-600);
  --sidebar-text-hover:  var(--gray-1000);
  --sidebar-active-bg:   var(--gray-100);
  --sidebar-active-text: var(--gray-1000);
  --sidebar-brand:       var(--gray-1000);

  /* ============================================================
     SPACING — unchanged (8px grid is fine)
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;

  /* ============================================================
     TYPOGRAPHY — tighter scale, Geist-feeling
     ============================================================ */
  --font-sans: "Geist", "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs:   11px;     /* micro UI: nav labels, badges, hints, table meta */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;     /* canonical body */
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    20px;     /* section titles */
  --text-2xl:   24px;
  --text-3xl:   28px;
  --text-4xl:   32px;     /* page hero */
  --text-5xl:   40px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight: -0.022em;     /* tight headers, Vercel signature */
  --tracking-normal: -0.005em;
  --tracking-wide:  0.04em;

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

  /* ============================================================
     RADIUS — sharper. 6px canonical.
     ============================================================ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;     /* canonical (was 8) */
  --radius-lg:   8px;     /* was 10 */
  --radius-xl:   10px;    /* was 12 */
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS — borders, not shadows. Keep tokens for modals only.
     ============================================================ */
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.10);
  /* Focus ring — monochrome, tight. Was a wide blue glow (the only blue in
     the chrome, inconsistent with the black/white system and visually loud
     on inputs). Now a subtle 2px neutral ring; the crisp black border on
     :focus is the primary cue. */
  --shadow-focus: 0 0 0 2px rgba(0,0,0,0.14);
  --shadow-focus-brand: 0 0 0 2px rgba(0,0,0,0.14);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --header-height:           56px;
  --bottom-nav-height:       56px;     /* mobile bottom nav */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 64px;
  --content-max:             1200px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 100ms;
  --duration-base: 160ms;
  --duration-slow: 240ms;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-base:    0;
  --z-sticky:  100;
  --z-sidebar:   200;
  --z-header:    300;
  --z-bottom-nav: 350;    /* mobile bottom nav */
  --z-overlay:   400;
  --z-drawer:    450;
  --z-modal:     500;
}