/*
 * tokens.css — Executive Search Command Center Design Tokens.
 *
 * Visual Language: High-End Private Executive Terminal (Dubai DIFC / Mayfair / Zurich).
 * Density with calm, precision typography, tabular figures, and architectural discipline.
 */

:root {
  color-scheme: light;

  /* ── Crextio Warm Cream & Golden Sun Palette (Canonical Reference) ────── */
  --canvas:        #F5F3EC;   /* Warm luminous ivory/cream canvas */
  --canvas-subtle: #EDEAE1;
  --surface:       #FFFFFF;   /* Pure crisp floating white cards */
  --surface-hover: #FAF9F5;
  --surface-active:#F2EFE8;
  --surface-dark:  #1D2128;   /* Deep charcoal signature emphasis card */
  --surface-sunk:  #EFECE5;   /* Wells, tracks, inset controls */
  --surface-float: #FFFFFF;   /* Modals, omnibox panel */

  /* Hairlines & Elevation */
  --border:        rgba(28, 33, 43, 0.06);
  --border-strong: rgba(28, 33, 43, 0.12);
  --hairline:      #E8E5DD;
  --on-dark-rule:  rgba(255, 255, 255, 0.10);
  --on-dark-sunk:  rgba(255, 255, 255, 0.06);

  /* Typography & Ink */
  --ink:           #181B22;   /* Deep carbon charcoal */
  --ink-soft:      #545B69;   /* Slate body ink */
  --ink-muted:     #8890A0;   /* Clean metadata grey */
  --on-dark:       #FFFFFF;   /* Crisp white on charcoal card */
  --on-dark-muted: #9AA1B2;

  /* Accent: Crextio Luminous Buttercup / Golden Saffron */
  --accent:        #FAC944;   /* Signature warm yellow from reference */
  --accent-hover:  #EBB830;
  --accent-soft:   rgba(250, 201, 68, 0.18);
  --accent-border: rgba(250, 201, 68, 0.42);
  --accent-ink:    #181B22;   /* High-contrast ink on yellow fill */
  --accent-fill:   #FAC944;
  --accent-on-fill:#181B22;

  /* Semantic Tones */
  --ok:            #10B981;   /* Emerald */
  --ok-soft:       #E6F7F0;
  --ok-ink:        #059669;
  --ok-border:     rgba(16, 185, 129, 0.25);

  --warn:          #F59E0B;   /* Amber */
  --warn-soft:     #FEF7E6;
  --warn-ink:      #D97706;
  --warn-border:   rgba(245, 158, 11, 0.25);

  --danger:        #EF4444;   /* Lacquer Red */
  --danger-soft:   #FEECEB;
  --danger-ink:    #DC2626;
  --danger-border: rgba(239, 68, 68, 0.25);

  --info:          #38BDF8;   /* Sky */
  --info-soft:     #EDF8FF;
  --info-ink:      #0284C7;
  --info-border:   rgba(56, 189, 248, 0.25);

  /* Geometry & Radii — 20px card curve directly from reference/direction.png */
  --radius-card:   20px;
  --radius-chip:   10px;
  --radius-pill:   9999px;

  /* Diffuse Airy Lighting */
  --shadow-card:   0 4px 20px rgba(28, 33, 43, 0.035), 0 1px 3px rgba(28, 33, 43, 0.02);
  --shadow-float:  0 16px 44px rgba(28, 33, 43, 0.10), 0 1px 3px rgba(28, 33, 43, 0.04);
  --overlay:       rgba(18, 20, 25, 0.40);
  --focus-ring:    rgba(250, 201, 68, 0.55);
  --shimmer:       rgba(255, 255, 255, 0.85);
  --wash:          rgba(254, 219, 128, 0.38);
  --photo-filter:  none;
  --scrollbar:     #D8D5CC;

  /* Toast Notification */
  --toast-surface:        #1D2128;
  --toast-ink:            #FFFFFF;
  --toast-accent:         #FAC944;
  --toast-danger:         #DC2626;
  --toast-danger-ink:     #FFFFFF;
}

[data-theme="light"] {
  color-scheme: light;
  /* Mirrors canonical Crextio light tokens above */
  --canvas:        #F5F3EC;
  --canvas-subtle: #EDEAE1;
  --surface:       #FFFFFF;
  --surface-hover: #FAF9F5;
  --surface-active:#F2EFE8;
  --surface-dark:  #1D2128;
  --surface-sunk:  #EFECE5;
  --surface-float: #FFFFFF;

  --border:        rgba(28, 33, 43, 0.06);
  --border-strong: rgba(28, 33, 43, 0.12);
  --hairline:      #E8E5DD;
  --on-dark-rule:  rgba(255, 255, 255, 0.10);
  --on-dark-sunk:  rgba(255, 255, 255, 0.06);

  --ink:           #181B22;
  --ink-soft:      #545B69;
  --ink-muted:     #8890A0;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #9AA1B2;

  --accent:        #FAC944;
  --accent-hover:  #EBB830;
  --accent-soft:   rgba(250, 201, 68, 0.18);
  --accent-border: rgba(250, 201, 68, 0.42);
  --accent-ink:    #181B22;
  --accent-fill:   #FAC944;
  --accent-on-fill:#181B22;

  --ok:            #10B981;
  --ok-soft:       #E6F7F0;
  --ok-ink:        #059669;
  --ok-border:     rgba(16, 185, 129, 0.25);

  --warn:          #F59E0B;
  --warn-soft:     #FEF7E6;
  --warn-ink:      #D97706;
  --warn-border:   rgba(245, 158, 11, 0.25);

  --danger:        #EF4444;
  --danger-soft:   #FEECEB;
  --danger-ink:    #DC2626;
  --danger-border: rgba(239, 68, 68, 0.25);

  --info:          #38BDF8;
  --info-soft:     #EDF8FF;
  --info-ink:      #0284C7;
  --info-border:   rgba(56, 189, 248, 0.25);

  --radius-card:   20px;
  --radius-chip:   10px;
  --radius-pill:   9999px;

  --shadow-card:   0 4px 20px rgba(28, 33, 43, 0.035), 0 1px 3px rgba(28, 33, 43, 0.02);
  --shadow-float:  0 16px 44px rgba(28, 33, 43, 0.10), 0 1px 3px rgba(28, 33, 43, 0.04);
  --overlay:       rgba(18, 20, 25, 0.40);
  --focus-ring:    rgba(250, 201, 68, 0.55);
  --shimmer:       rgba(255, 255, 255, 0.85);
  --wash:          rgba(254, 219, 128, 0.38);
  --photo-filter:  none;
  --scrollbar:     #D8D5CC;

  --toast-surface:        #1D2128;
  --toast-ink:            #FFFFFF;
  --toast-accent:         #FAC944;
  --toast-danger:         #DC2626;
  --toast-danger-ink:     #FFFFFF;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* ── Obsidian Night Mode ────────────────────────────────────────────── */
  --canvas:        #0D1015;
  --canvas-subtle: #12161E;
  --surface:       #161A22;
  --surface-hover: #1C212B;
  --surface-active:#222834;
  --surface-dark:  #1D222B;
  --surface-sunk:  #0F1218;
  --surface-float: #1C212B;

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --hairline:      rgba(255, 255, 255, 0.07);
  --on-dark-rule:  rgba(255, 255, 255, 0.08);
  --on-dark-sunk:  rgba(255, 255, 255, 0.04);

  --ink:           #F5F6F9;
  --ink-soft:      #A8AFC0;
  --ink-muted:     #6D7588;
  --on-dark:       #F5F6F9;
  --on-dark-muted: #8E96AA;

  --accent:        #FAC944;
  --accent-hover:  #F0BD32;
  --accent-soft:   rgba(250, 201, 68, 0.16);
  --accent-border: rgba(250, 201, 68, 0.32);
  --accent-ink:    #FAC944;
  --accent-fill:   #FAC944;
  --accent-on-fill:#0D1015;

  --ok:            #10B981;
  --ok-soft:       rgba(16, 185, 129, 0.12);
  --ok-ink:        #34D399;
  --ok-border:     rgba(16, 185, 129, 0.24);

  --warn:          #F59E0B;
  --warn-soft:     rgba(245, 158, 11, 0.12);
  --warn-ink:      #FBBF24;
  --warn-border:   rgba(245, 158, 11, 0.24);

  --danger:        #EF4444;
  --danger-soft:   rgba(239, 68, 68, 0.12);
  --danger-ink:    #F87171;
  --danger-border: rgba(239, 68, 68, 0.24);

  --info:          #38BDF8;
  --info-soft:     rgba(56, 189, 248, 0.12);
  --info-ink:      #7DD3FC;
  --info-border:   rgba(56, 189, 248, 0.24);

  --radius-card:   20px;
  --radius-chip:   10px;
  --radius-pill:   9999px;

  --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
  --shadow-float:  0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
  --overlay:       rgba(5, 7, 10, 0.78);
  --focus-ring:    rgba(250, 201, 68, 0.5);
  --shimmer:       rgba(255, 255, 255, 0.05);
  --wash:          rgba(250, 201, 68, 0.06);
  --photo-filter:  brightness(0.92);
  --scrollbar:     #242936;

  --toast-surface:        #181C26;
  --toast-ink:            #F5F6F9;
  --toast-accent:         #FAC944;
  --toast-danger:         #451313;
  --toast-danger-ink:     #FFA8A8;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Base Reset & Modern Precision Typography
 * ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1, "tnum" 1;
}

/* Subtle corner ambient vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(80vw 60vh at 100% 0%, var(--wash), transparent 70%);
}

strong, b, th { font-weight: 600; color: var(--ink); }
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0; color: var(--ink); }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-chip);
}

::selection { background: var(--accent-soft); color: var(--accent-ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ── Typography Scale ─────────────────────────────────────────────────── */

.t-greeting   { font-size: 30px; font-weight: 300; color: var(--ink); line-height: 1.2; letter-spacing: -0.025em; }
.t-hero       { font-size: 38px; font-weight: 300; color: var(--ink); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-record     { font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.015em; }
.t-card-title { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.t-label      { font-size: 11px; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.t-body       { font-size: 13px; font-weight: 400; color: var(--ink-soft); line-height: 1.45; }
.t-caption    { font-size: 11.5px; font-weight: 400; color: var(--ink-muted); line-height: 1.35; }
.t-ink        { color: var(--ink); }
.t-muted      { color: var(--ink-muted); }
.t-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; }

/* Utility */
.u-hidden    { display: none !important; }
.u-sr        { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-row       { display: flex; align-items: center; gap: 8px; }
.u-spread    { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-grow      { flex: 1 1 auto; min-width: 0; }
.u-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}