/* Design tokens (from the original "EVA Admin Suite — colors & type" sheet, unchanged). */
/* ─────────────────────────────────────────────────────────────
   EVA Admin Suite — colors & type
   Source of truth: Figma file "EVA Admin Suite.fig"
   Primitives → /UI-Components/Primitives, /Semantics, /Typography
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Color · Neutral (warm greys anchored on #3F3F42) ─── */
  --color-neutral-1:  #FFFFFF;
  --color-neutral-2:  #F5F5F9;
  --color-neutral-3:  #F2F2F7;
  --color-neutral-4:  #E5E5EA;
  --color-neutral-5:  #D1D1D6;
  --color-neutral-6:  #C7C7CC;
  --color-neutral-7:  #AEAEB2;
  --color-neutral-8:  #8E8E93;
  --color-neutral-9:  #66666A;
  --color-neutral-10: #3F3F42;
  --color-neutral-11: #000000;

  /* ─── Color · Primary (action blue) ─── */
  --color-primary-white: rgba(255,255,255,0.80);
  --color-primary-1: #B5DAFF;
  --color-primary-2: #0A84FF;
  --color-primary-3: #007AFF;
  --color-primary-4: #0040DD;

  /* ─── Color · Success ─── */
  --color-success-1: #C1F1CD;
  --color-success-2: #30D158;
  --color-success-3: #34C759;
  --color-success-4: #248A3D;

  /* ─── Color · Warning ─── */
  --color-warning-1: #FFE5BE;
  --color-warning-2: #FF9F0A;
  --color-warning-3: #FF9500;
  --color-warning-4: #C93400;

  /* ─── Color · Danger ─── */
  --color-danger-1: #FFC7C4;
  --color-danger-2: #FF453A;
  --color-danger-3: #FF3B30;
  --color-danger-4: #D70015;

  /* ─── Color · Accent ─── */
  --color-accent-indigo:  #5856D6;
  --color-accent-yellow:  #FFCC00;
  --color-accent-brown:   #A2845E;
  --color-accent-purple:  #922DA9;
  --color-accent-cyan:    #30B0C7;
  --color-accent-lime:    #A6DC07;
  --color-accent-pink:    #FF315F;
  --color-accent-sky:     #32ADE6;
  --color-accent-teal:    #00C7BE;

  /* ─── Color · Overlay (warm black washes on #3F3F42) ─── */
  --color-overlay-1: rgba(63,63,66,0.04);  /*  4% */
  --color-overlay-2: rgba(63,63,66,0.05);  /*  5% */
  --color-overlay-3: rgba(63,63,66,0.08);  /*  8% */
  --color-overlay-4: rgba(63,63,66,0.14);  /* 14% — borders */
  --color-overlay-5: rgba(63,63,66,0.20);  /* 20% — hover border */
  --color-overlay-6: rgba(63,63,66,0.30);  /* 30% — active border */
  --color-overlay-highlight: rgba(10,132,255,0.30);  /* focus ring */

  /* ─── Semantic · Surface (page) ─── */
  --surface-primary:   var(--color-neutral-1);
  --surface-secondary: var(--color-neutral-2);
  --surface-tertiary:  var(--color-neutral-3);
  --surface-contrast:  var(--color-neutral-10);

  /* ─── Semantic · Text ─── */
  --text-primary:   var(--color-neutral-11);
  --text-secondary: var(--color-neutral-9);
  --text-tertiary:  var(--color-neutral-7);
  --text-success:   var(--color-success-3);
  --text-inverse:   var(--color-neutral-1);
  --text-action:    var(--color-primary-3);

  /* ─── Semantic · Border ─── */
  --border-default: var(--color-overlay-4);
  --border-hover:   var(--color-overlay-5);
  --border-active:  var(--color-overlay-6);
  --border-focus:   var(--color-primary-3);

  /* ─── Semantic · Action (primary button / link) ─── */
  --action-default: var(--color-primary-3);
  --action-hover:   var(--color-primary-2);
  --action-active:  var(--color-primary-4);
  --action-focus:   var(--color-primary-3);
  --action-subtle:  var(--color-primary-1);

  /* ─── Semantic · Alert ─── */
  --alert-info:    var(--color-primary-1);
  --alert-success: var(--color-success-1);
  --alert-warning: var(--color-warning-1);
  --alert-danger:  var(--color-danger-1);

  /* ─── Shadow system ─── */
  --shadow-focus-ring:  0 0 0 3px var(--color-overlay-highlight);
  --shadow-inner-sm:    inset 0 1px 2px 1px rgba(63,63,66,0.05);
  --shadow-sm:          0 1px 2px 1px rgba(63,63,66,0.05);
  --shadow-md:          0 7px 22px 0 rgba(63,63,66,0.08);
  --shadow-dropdown:    0 7px 22px 0 rgba(63,63,66,0.14), 0 0 0 1px rgba(63,63,66,0.08);

  /* ─── Radius scale ─── */
  --radius-xs:      1px;
  --radius-sm:      4px;
  --radius-md:      5px;
  --radius-default: 6px;   /* buttons, inputs, tags */
  --radius-lg:      7px;
  --radius-xl:      10px;
  --radius-2xl:     16px;
  --radius-card:    10px;
  --radius-pill:    9999px;

  /* ─── Spacing scale (Tailwind-compatible, ×0.25rem) ─── */
  --space-0:   0;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ─── Typography · Family ─── */
  /* Design uses "SF Pro" with "Roboto Mono" for code/tabular and
     "Messina Sans" for marketing surfaces (Introducing Lyra, Cards).
     Web-safe fallback chain → falls back to Apple system stack. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Monaco, Consolas, monospace;
  --font-marketing: "Messina Sans", "SF Pro Display", -apple-system, sans-serif;

  /* ─── Typography · Role tokens (size · line-height · weight) ─── */
  /* Display — section headers & dashboards           */
  --type-display-size: 36px; --type-display-lh: 44px; --type-display-weight: 700;
  /* Heading — card titles, dialog headers            */
  --type-h1-size: 24px;   --type-h1-lh: 28px;   --type-h1-weight: 700;
  --type-h2-size: 17px;   --type-h2-lh: 20px;   --type-h2-weight: 600;
  --type-h3-size: 15px;   --type-h3-lh: 18px;   --type-h3-weight: 600;
  /* Body — cell text, paragraphs                     */
  --type-body-size: 16px; --type-body-lh: 28px; --type-body-weight: 400;
  --type-body-md-size: 13px; --type-body-md-lh: 16px; --type-body-md-weight: 400;
  --type-body-sm-size: 11px; --type-body-sm-lh: 13px; --type-body-sm-weight: 400;
  /* Label — input labels, bold captions              */
  --type-label-size: 13px; --type-label-lh: 16px; --type-label-weight: 700;
  /* Button — controls                                */
  --type-button-size: 13px; --type-button-lh: 16px; --type-button-weight: 400;
  /* Code — tabular                                   */
  --type-code-size: 13px; --type-code-lh: 16px;
}

/* ─── Semantic role classes (use anywhere) ─── */
html, body { font-family: var(--font-sans); color: var(--text-primary); background: var(--surface-primary); }
body { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); }

.t-display { font-family: var(--font-display); font-size: var(--type-display-size); line-height: var(--type-display-lh); font-weight: var(--type-display-weight); letter-spacing: -0.01em; }
.t-h1      { font-family: var(--font-display); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); font-weight: var(--type-h1-weight); }
.t-h2      { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: var(--type-h2-weight); }
.t-h3      { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--type-h3-weight); }
.t-body    { font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: var(--type-body-weight); }
.t-body-md { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); font-weight: var(--type-body-md-weight); }
.t-body-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); font-weight: var(--type-body-sm-weight); }
.t-label   { font-size: var(--type-label-size); line-height: var(--type-label-lh); font-weight: var(--type-label-weight); }
.t-button  { font-size: var(--type-button-size); line-height: var(--type-button-lh); font-weight: var(--type-button-weight); }
.t-code    { font-family: var(--font-mono); font-size: var(--type-code-size); line-height: var(--type-code-lh); font-variant-numeric: tabular-nums; }
.t-tertiary { color: var(--text-tertiary); }
.t-secondary { color: var(--text-secondary); }

/* ─── Motion ─── */
:root {
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
}