/*
 * EchoLog landing tokens, on the app's Branding Noir identity (src/styles/tokens.css).
 * The page is light: a warm paper ground, ink #0a1020 for text, and the app's light-theme values for
 * anything that has to read as text or action (blue #2563eb, mint #047857). Brand blue #3b82f6 and
 * mint #10b981 stay the graphic colours everywhere (--blue, --mint): the call waveform, the meters,
 * the 100 credits. The product illustrations (.appui: the call window, the documents panel) use the
 * app's own light set (src/styles/tokens.css, [data-theme='light'], the default theme since 1.8), so
 * they read as the real app sitting on the page. The dark set stays under [data-theme='dark'].
 */

:root {
  color-scheme: light;

  --blue: #3b82f6;
  --mint: #10b981;

  --ink-0: #f6f5f2;
  --ink-1: #ffffff;
  --ink-2: #efede8;
  --ink-3: #e4e1da;
  --ink-4: #d4d0c7;
  --hair: #e2ded6;
  --hair-strong: #cbc6bc;

  --text-1: #0a1020;
  --text-2: #4a5467;
  --text-3: #7a8293;
  --text-inverse: #ffffff;

  --accent: #2563eb;
  --accent-hi: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-glow: rgba(37, 99, 235, 0.18);

  --secondary: #059669;
  --secondary-hi: #047857;

  --danger: #dc2626;
  --rec: #dc2626;
  --rec-glow: rgba(220, 38, 38, 0.22);
  --success: #059669;
  --warning: #d97706;

  --shadow-modal: 0 24px 48px -18px rgba(10, 16, 32, 0.25), 0 0 0 1px rgba(10, 16, 32, 0.06);
  --shadow-elev: 0 10px 24px -12px rgba(10, 16, 32, 0.22);
  /* The white illustrations sit on paper: a long, soft ink shadow lifts them off it. */
  --shadow-island: 0 48px 90px -44px rgba(15, 23, 42, 0.34), 0 16px 32px -22px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.03);

  /* Page-level washes and lines */
  --on-accent-hi: rgba(255, 255, 255, 0.22);
  --mint-wash-8: rgba(16, 185, 129, 0.08);
  --mint-wash-14: rgba(16, 185, 129, 0.14);
  --mint-line: rgba(5, 150, 105, 0.35);
  --chip-bg: rgba(255, 255, 255, 0.72);
  --nav-bg: rgba(246, 245, 242, 0.92);
  --rec-wash: rgba(220, 38, 38, 0.1);
  --rec-ink: #b91c1c;
  --warn-line: rgba(217, 119, 6, 0.45);
  --warn-wash: rgba(245, 158, 11, 0.1);
  --field: #ffffff;
  /* Outline of the hollow 100 */
  --stroke: #bdb7ab;

  --grain-opacity: 0.015;
}

/* The app's light set (its default theme since 1.8), for the product illustrations on the page. */
.appui {
  color-scheme: light;

  --ink-0: #f8fafc;
  --ink-1: #ffffff;
  --ink-2: #f1f5f9;
  --ink-3: #e2e8f0;
  --ink-4: #cbd5e1;
  --hair: #e2e8f0;
  --hair-strong: #cbd5e1;

  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --text-inverse: #ffffff;

  --accent: #2563eb;
  --accent-hi: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-glow: rgba(37, 99, 235, 0.18);
  --accent-wash: rgba(37, 99, 235, 0.08);

  --secondary: #059669;
  --secondary-hi: #047857;

  --danger: #dc2626;
  --rec: #dc2626;
  --rec-glow: rgba(220, 38, 38, 0.22);
  --success: #059669;
  --warning: #d97706;

  --shadow-elev: 0 10px 24px -12px rgba(15, 23, 42, 0.18);

  --mint-wash-8: rgba(5, 150, 105, 0.07);
  --mint-wash-14: rgba(5, 150, 105, 0.12);
  --mint-line: rgba(5, 150, 105, 0.3);
  --rec-wash: rgba(220, 38, 38, 0.1);
  --rec-ink: #b91c1c;
  --field: #ffffff;
  --stroke: #cbd5e1;
}

/* The app's dark Branding Noir set. */
[data-theme='dark'] {
  color-scheme: dark;

  --ink-0: #0a1020;
  --ink-1: #111827;
  --ink-2: #1a2336;
  --ink-3: #243149;
  --ink-4: #2f3e5b;
  --hair: #2a3550;
  --hair-strong: #3b4a6b;

  --text-1: #f1f5fb;
  --text-2: #9ba8c2;
  --text-3: #6a7a98;
  --text-inverse: #0a1020;

  --accent: var(--blue);
  --accent-hi: #60a5fa;
  --accent-ink: #0a1020;
  --accent-glow: rgba(59, 130, 246, 0.28);

  --secondary: var(--mint);
  --secondary-hi: #34d399;

  --danger: #f43f5e;
  --rec: #f43f5e;
  --rec-glow: rgba(244, 63, 94, 0.42);
  --success: var(--mint);
  --warning: #f59e0b;

  --shadow-modal: 0 40px 80px -32px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-elev: 0 14px 36px -18px rgba(0, 0, 0, 0.65);

  --mint-wash-8: rgba(16, 185, 129, 0.08);
  --mint-wash-14: rgba(16, 185, 129, 0.14);
  --mint-line: rgba(16, 185, 129, 0.35);
  --chip-bg: rgba(26, 35, 54, 0.6);
  --rec-wash: rgba(244, 63, 94, 0.14);
  --rec-ink: #fda4b4;
  --field: #1a2336;
  --stroke: #3b4a6b;

  --grain-opacity: 0.028;
}

:root {
  /* Typography */
  --font-serif: 'Manrope', system-ui, sans-serif; /* retained name, maps to Manrope */
  --font-sans:
    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-28: 1.75rem;
  --fs-40: 2.5rem;
  --fs-64: 4rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 380ms;
  --dur-5: 560ms;

  --z-dock: 10;
  --z-sticky: 20;
  --z-toast: 200;
  --z-modal: 100;
  --z-command: 120;
  --z-tooltip: 260;
  --z-titlebar: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
    --grain-opacity: 0;
  }
}