/* ============================================================================
   GlazBox Design Tokens — two-layer architecture
   ----------------------------------------------------------------------------
   LAYER 1 — RAW PALETTE (--raw-*). Physical color values only.
   Components must NEVER reference these directly.

   LAYER 2 — SEMANTIC TOKENS (--gb-*). The only tokens components consume.
   Re-theming a client = overriding the semantic layer (see the
   [data-gb-theme] blocks below) — component code is never touched.

   Themes shipped: light (GlazBox navy, default) · emerald (alternate client
   proof) · blue · night.
   ========================================================================== */

:root {
  /* ---- RAW · brand navy (anchor: navy-900 #001E6C) ---- */
  --raw-navy-950: #00123f;
  --raw-navy-900: #001E6C;
  --raw-navy-800: #0b2d85;
  --raw-navy-700: #163d9e;
  --raw-navy-600: #2450b4;
  --raw-navy-500: #3565c7;
  --raw-navy-400: #5b84d6;
  --raw-navy-300: #86a5e3;
  --raw-navy-200: #b1c5ee;
  --raw-navy-100: #d4dff6;
  --raw-navy-50:  #ecf1fb;

  /* ---- RAW · accent blue (anchor: blue-700 #035397) ---- */
  --raw-blue-900: #032c52;
  --raw-blue-800: #04406f;
  --raw-blue-700: #035397;
  --raw-blue-600: #0f66b4;
  --raw-blue-500: #1d7cd0;
  --raw-blue-400: #4a9ce0;
  --raw-blue-300: #82bceb;
  --raw-blue-200: #b4d7f3;
  --raw-blue-100: #d8eaf9;
  --raw-blue-50:  #edf6fc;

  /* ---- RAW · cool neutrals ---- */
  --raw-neutral-0:   #ffffff;
  --raw-neutral-25:  #fbfcfe;
  --raw-neutral-50:  #f4f6fa;
  --raw-neutral-100: #e9edf3;
  --raw-neutral-150: #dfe5ee;
  --raw-neutral-200: #d3dbe6;
  --raw-neutral-300: #b9c4d4;
  --raw-neutral-400: #8d99ad;
  --raw-neutral-500: #67748b;
  --raw-neutral-600: #4c596f;
  --raw-neutral-700: #37445c;
  --raw-neutral-800: #222d42;
  --raw-neutral-900: #101a2d;
  --raw-neutral-950: #080f1d;

  /* ---- RAW · green (success / approved / active) ---- */
  --raw-green-50:  #ecf8f1;
  --raw-green-100: #dcf3e6;
  --raw-green-200: #b9e5cc;
  --raw-green-300: #7ecda0;
  --raw-green-500: #2d9e57;
  --raw-green-600: #1a7f3c;
  --raw-green-700: #146530;
  --raw-green-800: #0f4e25;

  /* ---- RAW · amber (pending / warning) ---- */
  --raw-amber-50:  #fff8e8;
  --raw-amber-75:  #fff6e3;
  --raw-amber-100: #fef3c7;
  --raw-amber-200: #f5e3a4;
  --raw-amber-300: #ecd9ab;
  --raw-amber-600: #a16207;
  --raw-amber-700: #92400e;
  --raw-amber-800: #7a5410;

  /* ---- RAW · red (danger / rejected / deactivated) ---- */
  --raw-red-50:  #fef7f6;
  --raw-red-100: #fdeceb;
  --raw-red-200: #f6d4d4;
  --raw-red-300: #eeadab;
  --raw-red-500: #d9382d;
  --raw-red-600: #c22f2f;
  --raw-red-700: #9c211d;

  /* ---- RAW · indigo (info) ---- */
  --raw-indigo-100: #e8f0fe;
  --raw-indigo-200: #cbdcf9;
  --raw-indigo-700: #1e4fa8;

  /* ---- RAW · violet (admin) ---- */
  --raw-violet-100: #ecebff;
  --raw-violet-700: #4338ca;

  /* ---- RAW · emerald (alternate client brand) ---- */
  --raw-emerald-950: #04231c;
  --raw-emerald-900: #06382d;
  --raw-emerald-800: #0a4a3b;
  --raw-emerald-700: #0e5c49;
  --raw-emerald-600: #127057;
  --raw-emerald-500: #1a8465;
  --raw-emerald-400: #3ea183;
  --raw-emerald-300: #79bfa9;
  --raw-emerald-200: #aed8c9;
  --raw-emerald-100: #d5ebe2;
  --raw-emerald-50:  #ecf7f2;

  /* ---- RAW · crimson (red client brand) ---- */
  --raw-crimson-950: #33060f;
  --raw-crimson-900: #4d0a18;
  --raw-crimson-800: #6b0f22;
  --raw-crimson-700: #86142b;
  --raw-crimson-600: #a01a35;
  --raw-crimson-500: #b92841;
  --raw-crimson-400: #cd5468;
  --raw-crimson-300: #de8494;
  --raw-crimson-200: #edb3bd;
  --raw-crimson-100: #f6d6dc;
  --raw-crimson-50:  #fbedf0;

  /* ======================================================================
     SEMANTIC · theme-invariant tokens
     ==================================================================== */

  /* Typography */
  --gb-font-ui: Inter, 'Segoe UI', system-ui, sans-serif;
  --gb-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale — 4px base */
  --gb-space-1: 4px;
  --gb-space-2: 8px;
  --gb-space-3: 12px;
  --gb-space-4: 16px;
  --gb-space-5: 20px;
  --gb-space-6: 24px;
  --gb-space-8: 32px;
  --gb-space-10: 40px;
  --gb-space-12: 48px;

  /* Radius scale */
  --gb-radius-1: 4px;
  --gb-radius-2: 6px;
  --gb-radius-3: 8px;
  --gb-radius-4: 10px;
  --gb-radius-5: 12px;
  --gb-radius-6: 14px;
  --gb-radius-pill: 999px;

  /* Z-index scale */
  --gb-z-sticky: 40;
  --gb-z-nav: 60;
  --gb-z-scrim: 55;
  --gb-z-drawer: 56;
  --gb-z-modal: 60;
  --gb-z-toast: 80;
}

/* ==========================================================================
   SEMANTIC · LIGHT (GlazBox navy — default)
   ======================================================================== */
:root, [data-gb-theme="light"] {
  /* Surfaces */
  --gb-app: var(--raw-neutral-100);
  --gb-surface: var(--raw-neutral-0);
  --gb-surface-2: #f4f7fb;
  --gb-topbar: rgba(214, 230, 251, .94);

  /* Lines & fields */
  --gb-line: var(--raw-neutral-200);
  --gb-line-2: #e7ecf3;
  --gb-field: #f2f5fa;
  --gb-field-border: var(--raw-neutral-300);
  --gb-focus: rgba(3, 83, 151, .22);

  /* Text */
  --gb-ink: #0a1c33;
  --gb-text: #1b2638;
  --gb-text-2: #3b475c;
  --gb-muted: #54627a;
  --gb-faint: #79859a;

  /* Brand & accent */
  --gb-brand: var(--raw-navy-900);
  --gb-brand-2: var(--raw-navy-950);
  --gb-accent: var(--raw-blue-700);
  --gb-accent-strong: var(--raw-blue-800);
  --gb-accent-bg: var(--raw-navy-50);

  /* On-brand (content sitting on --gb-brand surfaces) */
  --gb-on-brand: #ffffff;
  --gb-on-brand-soft: #c2d0e6;
  --gb-on-brand-muted: #92a8cc;
  --gb-on-brand-faint: #7e95ba;
  --gb-on-brand-border: rgba(255, 255, 255, .16);
  --gb-on-brand-surface: rgba(255, 255, 255, .08);

  /* Brand mark & avatars */
  --gb-mark-1: #7da2f0;
  --gb-mark-2: #aac1f7;
  --gb-avatar-a: #3f6fd6;
  --gb-avatar-b: #21459a;

  /* Status — success (green-700 for AA on tinted bg) */
  --gb-success: var(--raw-green-700);
  --gb-success-strong: var(--raw-green-800);
  --gb-success-bg: var(--raw-green-100);
  --gb-success-border: var(--raw-green-200);

  /* Status — pending / warning (amber) */
  --gb-pending: var(--raw-amber-700);
  --gb-pending-bg: var(--raw-amber-100);
  --gb-pending-border: var(--raw-amber-300);
  --gb-warn-row: var(--raw-amber-75);
  --gb-warn-ink: var(--raw-amber-800);
  --gb-warn-border: var(--raw-amber-300);

  /* Status — danger */
  --gb-danger: var(--raw-red-600);
  --gb-danger-strong: var(--raw-red-700);
  --gb-danger-bg: var(--raw-red-100);
  --gb-danger-border: var(--raw-red-200);

  /* Status — info */
  --gb-info: var(--raw-indigo-700);
  --gb-info-bg: var(--raw-indigo-100);
  --gb-info-border: var(--raw-indigo-200);

  /* Status — neutral (Deleted, audit contexts) */
  --gb-neutral: #5b6471;
  --gb-neutral-bg: #eceef1;
  --gb-neutral-border: var(--raw-neutral-200);

  /* Role badges */
  --gb-badge-maker-bg: var(--raw-indigo-100);
  --gb-badge-maker-fg: var(--raw-indigo-700);
  --gb-badge-approver-bg: var(--raw-green-100);
  --gb-badge-approver-fg: var(--raw-green-600);
  --gb-badge-admin-bg: var(--raw-violet-100);
  --gb-badge-admin-fg: var(--raw-violet-700);

  /* Sidebar */
  --gb-sidebar: var(--raw-neutral-0);
  --gb-sidebar-ink: #46505f;
  --gb-sidebar-ink-strong: #0b2456;
  --gb-sidebar-label: #9aa4b2;
  --gb-sidebar-active-bg: #e8f0fd;
  --gb-sidebar-active-bar: var(--raw-navy-900);
  --gb-sidebar-border: #e7ecf3;
  --gb-sidebar-hover: #f3f6fc;

  /* Elevation */
  --gb-shadow: rgba(16, 24, 40, .10);
  --gb-elev-1: 0 1px 3px rgba(16, 24, 40, .06);
  --gb-elev-2: 0 4px 12px rgba(16, 24, 40, .10);
  --gb-elev-3: 0 10px 30px rgba(16, 24, 40, .18), 0 1px 3px rgba(16, 24, 40, .08);
  --gb-elev-4: 0 24px 70px rgba(8, 25, 51, .28);
  --gb-elev-brand: 0 4px 12px rgba(0, 30, 108, .18);
  --gb-scrim: rgba(5, 15, 28, .45);
}

/* ==========================================================================
   SEMANTIC · EMERALD (alternate client theme — proof of re-theming)
   Only the semantic layer is overridden; no component changes.
   ======================================================================== */
[data-gb-theme="emerald"] {
  --gb-app: #e9f0ec;
  --gb-surface-2: #f2f8f5;
  --gb-topbar: rgba(209, 235, 224, .94);
  --gb-line: #cfdcd4;
  --gb-line-2: #e3ede7;
  --gb-field: #f1f7f3;
  --gb-field-border: #adc4b8;
  --gb-focus: rgba(18, 112, 87, .24);
  --gb-ink: #0c231b;
  --gb-text: #1c2f27;
  --gb-text-2: #3c5148;
  --gb-muted: #57705f;
  --gb-faint: #7b9184;
  --gb-brand: var(--raw-emerald-800);
  --gb-brand-2: var(--raw-emerald-900);
  --gb-accent: var(--raw-emerald-600);
  --gb-accent-strong: var(--raw-emerald-800);
  --gb-accent-bg: var(--raw-emerald-100);
  --gb-on-brand-soft: #cde5da;
  --gb-on-brand-muted: #9cc4b3;
  --gb-on-brand-faint: #83ac9b;
  --gb-mark-1: #7fc4ab;
  --gb-mark-2: #b1dcc9;
  --gb-avatar-a: #2f8f72;
  --gb-avatar-b: #14604b;
  --gb-sidebar-ink-strong: #0c3a2e;
  --gb-sidebar-active-bg: #e2f2ea;
  --gb-sidebar-active-bar: var(--raw-emerald-800);
  --gb-sidebar-hover: #f0f7f3;
  --gb-elev-brand: 0 4px 12px rgba(10, 74, 59, .20);
}

/* ==========================================================================
   SEMANTIC · CRIMSON (red client theme — for demos to red-brand banks)
   Status hues stay stable: danger keeps its own red; brand carries the
   deeper crimson so Approve/Reject semantics never blur into the brand.
   ======================================================================== */
[data-gb-theme="crimson"] {
  --gb-app: #f2ecee;
  --gb-surface-2: #faf5f6;
  --gb-topbar: rgba(247, 226, 231, .94);
  --gb-line: #e3d3d7;
  --gb-line-2: #eee2e5;
  --gb-field: #f8f2f3;
  --gb-field-border: #d0b3ba;
  --gb-focus: rgba(160, 26, 53, .20);
  --gb-ink: #2b1219;
  --gb-text: #3a2129;
  --gb-text-2: #5c3f48;
  --gb-muted: #775962;
  --gb-faint: #97808a;
  --gb-brand: var(--raw-crimson-800);
  --gb-brand-2: var(--raw-crimson-900);
  --gb-accent: var(--raw-crimson-600);
  --gb-accent-strong: var(--raw-crimson-800);
  --gb-accent-bg: var(--raw-crimson-50);
  --gb-on-brand-soft: #f2ccd4;
  --gb-on-brand-muted: #dfa4b1;
  --gb-on-brand-faint: #c98a99;
  --gb-mark-1: #e9909f;
  --gb-mark-2: #f4bfc9;
  --gb-avatar-a: #b23a52;
  --gb-avatar-b: #7c1128;
  --gb-sidebar-ink-strong: #4d0a18;
  --gb-sidebar-active-bg: #f8e4e9;
  --gb-sidebar-active-bar: var(--raw-crimson-800);
  --gb-sidebar-hover: #f8f0f2;
  --gb-elev-brand: 0 4px 12px rgba(107, 15, 34, .22);
}

/* ==========================================================================
   SEMANTIC · BLUE (deep-rail variant)
   ======================================================================== */
[data-gb-theme="blue"] {
  --gb-app: #e8f1fb;
  --gb-surface: var(--raw-neutral-0);
  --gb-surface-2: #eef4fc;
  --gb-topbar: rgba(197, 219, 247, .95);
  --gb-line: #cdddf0;
  --gb-line-2: #e2edf9;
  --gb-field: #ecf3fd;
  --gb-field-border: #aec6ea;
  --gb-focus: rgba(22, 87, 207, .22);
  --gb-ink: #08214d;
  --gb-text: #0f2a55;
  --gb-text-2: #2c4470;
  --gb-muted: #4c6491;
  --gb-faint: #6f86ad;
  --gb-accent: #1657cf;
  --gb-accent-strong: #103f9c;
  --gb-accent-bg: #e1ecfe;
  --gb-brand: #0b3aa3;
  --gb-brand-2: #072a82;
  --gb-sidebar: #0a2f8a;
  --gb-sidebar-ink: #bccdf0;
  --gb-sidebar-ink-strong: #ffffff;
  --gb-sidebar-label: #869bce;
  --gb-sidebar-active-bg: rgba(255, 255, 255, .15);
  --gb-sidebar-active-bar: #9fc0ff;
  --gb-sidebar-border: rgba(255, 255, 255, .12);
  --gb-sidebar-hover: rgba(255, 255, 255, .10);
  --gb-warn-row: #fff3d6;
  --gb-warn-ink: #77500e;
  --gb-warn-border: #e6d3a2;
  --gb-shadow: rgba(11, 40, 100, .16);
}

/* ==========================================================================
   SEMANTIC · NIGHT
   ======================================================================== */
[data-gb-theme="night"] {
  --gb-app: #0b1220;
  --gb-surface: #151d2e;
  --gb-surface-2: #1b2436;
  --gb-topbar: rgba(14, 20, 33, .95);
  --gb-line: #2b3650;
  --gb-line-2: #232e44;
  --gb-field: #0f1626;
  --gb-field-border: #384a66;
  --gb-focus: rgba(106, 155, 245, .30);
  --gb-ink: #f2f6fc;
  --gb-text: #dde5f1;
  --gb-text-2: #aab6ca;
  --gb-muted: #8492a8;
  --gb-faint: #6b7889;
  --gb-accent: #6a9bf5;
  --gb-accent-strong: #a7c5ff;
  --gb-accent-bg: #1d2942;
  --gb-brand: #2553c9;
  --gb-brand-2: #1c44ad;
  --gb-sidebar: #0a1322;
  --gb-sidebar-ink: #9aa7be;
  --gb-sidebar-ink-strong: #ffffff;
  --gb-sidebar-label: #647387;
  --gb-sidebar-active-bg: rgba(255, 255, 255, .08);
  --gb-sidebar-active-bar: #6a9bf5;
  --gb-sidebar-border: rgba(255, 255, 255, .06);
  --gb-sidebar-hover: rgba(255, 255, 255, .05);
  --gb-warn-row: #2c2615;
  --gb-warn-ink: #e3bf6e;
  --gb-warn-border: #4d3f1c;
  --gb-shadow: rgba(0, 0, 0, .45);
  --gb-success-bg: #12301e;
  --gb-success: #5fc98b;
  --gb-success-border: #1d4a2e;
  --gb-pending-bg: #33290f;
  --gb-pending: #e5b45c;
  --gb-pending-border: #4d3f1c;
  --gb-danger-bg: #391718;
  --gb-danger: #ef8b85;
  --gb-danger-border: #542326;
  --gb-info-bg: #1a2745;
  --gb-info: #93b6f5;
  --gb-info-border: #2a3d63;
  --gb-neutral: #97a2b4;
  --gb-neutral-bg: #232d40;
  --gb-neutral-border: #2b3650;
  --gb-badge-maker-bg: #1a2745;
  --gb-badge-maker-fg: #93b6f5;
  --gb-badge-approver-bg: #12301e;
  --gb-badge-approver-fg: #5fc98b;
  --gb-badge-admin-bg: #262047;
  --gb-badge-admin-fg: #b3abf7;
  --gb-scrim: rgba(0, 0, 0, .55);
}