/* ──────────────────────────────────────────────────────────────
   emailzeno — design tokens (light + dark)
   Single source of truth. Copy this file verbatim to:
     • apex/public/assets/css/tokens.css
     • app/frontend/src/styles/tokens.css
   See docs/design-guidelines.md for the token contract.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ─── */
  --ink:         #0a0a0a;
  --ink-soft:    #2a2a2a;
  --paper:       #ffffff;
  --paper-warm:  #f7f6f1;
  --paper-cool:  #f1efe8;
  --paper-cream: #f0ebe0;
  --surface:     #ffffff;
  --surface-2:   #f7f6f1;
  --rule:        #d8d3c8;
  --rule-soft:   #e8e4da;
  --muted:       #6b6558;
  --muted-soft:  #8a847a;

  /* ─── Accent — emailable-style teal (trust color of verification) ─── */
  --accent:        #0d9488;
  --accent-deep:   #0f766e;
  --accent-hover:  #0b7e74;
  --accent-active: #095e57;
  --accent-soft:   #ccfbf1;
  --accent-cream:  #f0fdfa;

  /* ─── Elevation surface (modals, popovers) ─── */
  --paper-elevated: #ffffff;
  --shadow-elevated: 0 14px 40px -12px rgba(15, 23, 42, 0.18);

  /* ─── Status (Tailwind-aligned for verification result categories) ─── */
  --ok:        #10b981;   /* deliverable — emerald */
  --ok-soft:   #d1fae5;
  --bad:       #ef4444;   /* undeliverable — rose */
  --bad-soft:  #fee2e2;
  --warn:      #f59e0b;   /* risky — amber */
  --warn-soft: #fef3c7;
  --info:      #0ea5e9;   /* info / processing — sky */
  --info-soft: #e0f2fe;
  --neutral:   #64748b;   /* unknown — slate */

  /* ─── Bootstrap bridge (apex side) ─── */
  --bs-primary:           #0d9488;
  --bs-primary-rgb:       13, 148, 136;
  --bs-link-color:        #0d9488;
  --bs-link-hover-color:  #0f766e;
  --brand:                #0d9488;
  --brand-emphasis:       #0f766e;
  --brand-subtle:         #ccfbf1;

  /* ─── Type — Inter default, matching emailable.com flat-technical aesthetic ─── */
  --display-font: 'Inter', system-ui, sans-serif;
  --body-font:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono-font:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ─── Code block (dark-on-near-black both themes — emailable signature look) ─── */
  --code-bg: #0d1117;
  --code-fg: #e6edf3;

  /* ─── Spacing scale ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ─── Radius — tightened to 6px for emailable's flatter card style ─── */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ─── Shadow ─── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10);

  /* ─── Motion ─── */
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 420ms;
  --ease:   cubic-bezier(.2, .8, .2, 1);

  /* ─── Misc ─── */
  --zebra: rgba(10, 10, 10, 0.022);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ─── Phase-03 additions (delta from design-tokens-delta.md) ─── */

  /* Neutral card surface (not warm) — for cards inside light sections */
  --surface-soft: #f8f8f8;

  /* Heavier divider for comparison tables and section-level hr */
  --rule-strong: #b8b3a8;

  /* Extended spacing scale — section-level vertical padding */
  --space-9:  80px;
  --space-10: 96px;

  /* Type scale — prevents hardcoded px values across phases */
  --text-display: 3.5rem;   /* 56px hero H1 */
  --text-xl:      2.625rem; /* 42px section H2 */
  --text-lg:      1.75rem;  /* 28px sub-section H3 */

  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────────
   Dark theme overrides
   ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:         #f5f5f5;
  --ink-soft:    #c8c8c8;
  --paper:       #0b1220;
  --paper-warm:  #101a2e;
  --paper-cool:  #0e1729;
  --paper-cream: #131e35;
  --surface:     #101a2e;
  --surface-2:   #0e1729;
  --rule:        #233152;
  --rule-soft:   #1a2643;
  --muted:       #94a3b8;
  --muted-soft:  #64748b;

  --accent:       #2dd4bf;
  --accent-deep:  #0d9488;
  --accent-hover: #5eead4;
  --accent-active: #99f6e4;
  --accent-soft:  #134e4a;
  --accent-cream: #042f2e;

  --paper-elevated: #131e35;
  --shadow-elevated: 0 16px 48px -12px rgba(0, 0, 0, 0.55);

  /* Phase-03 dark-mode overrides */
  --surface-soft: #0f1825;
  --rule-strong:  #2e3f5c;
  --space-9:  80px;
  --space-10: 96px;
  --text-display: 3.5rem;
  --text-xl:      2.625rem;
  --text-lg:      1.75rem;

  --ok:        #34d399;
  --ok-soft:   #052e1c;
  --bad:       #f87171;
  --bad-soft:  #3b0d10;
  --warn:      #fbbf24;
  --warn-soft: #3a2706;
  --info:      #38bdf8;
  --info-soft: #0c2940;

  --bs-primary:           #2dd4bf;
  --bs-primary-rgb:       45, 212, 191;
  --bs-link-color:        #5eead4;
  --bs-link-hover-color:  #99f6e4;
  --brand:                #2dd4bf;
  --brand-emphasis:       #99f6e4;
  --brand-subtle:         #134e4a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);

  --zebra: rgba(255, 255, 255, 0.025);

  color-scheme: dark;
}

/* Auto-pick dark when user prefers it AND no explicit choice was made */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
  :root:not([data-theme]) {
    --ink: #f5f5f5;          --ink-soft: #c8c8c8;
    --paper: #0b1220;        --paper-warm: #101a2e;
    --paper-cool: #0e1729;   --paper-cream: #131e35;
    --surface: #101a2e;      --surface-2: #0e1729;
    --rule: #233152;         --rule-soft: #1a2643;
    --muted: #94a3b8;        --muted-soft: #64748b;
    --accent: #2dd4bf;       --accent-deep: #0d9488;
    --accent-soft: #134e4a;  --accent-cream: #042f2e;
    --ok: #34d399;           --ok-soft: #052e1c;
    --bad: #f87171;          --bad-soft: #3b0d10;
    --warn: #fbbf24;         --warn-soft: #3a2706;
    --info: #38bdf8;         --info-soft: #0c2940;
    --bs-primary: #2dd4bf;   --bs-primary-rgb: 45, 212, 191;
    --bs-link-color: #5eead4; --bs-link-hover-color: #99f6e4;
    --brand: #2dd4bf;        --brand-emphasis: #99f6e4;
    --brand-subtle: #134e4a;
    --zebra: rgba(255, 255, 255, 0.025);
    --surface-soft: #0f1825;
    --rule-strong:  #2e3f5c;
  }
}