/* E10 design tokens: the ONLY file where raw colour values may appear (checked by test/no-raw-colors.test.ts).
   Components use roles (bg-bg, text-text-muted, border-border ...), never hex. Values: docs/plan/E10-brand-and-ui.md 2.2/2.3. */

/* Brand-kit logo (E04-R33): colours from brand-kit/svg/static transparent-on{dark,light}; dark is the default. */
.et-logo {
  --et-logo-ink: #f0f2f5;
  --et-logo-teal: #00c9b1;
  --et-logo-orange: #ff671f;
}
:root[data-theme='light'] .et-logo {
  --et-logo-ink: #090c10;
  --et-logo-teal: #007a6e;
}
.et-logo .ink {
  fill: var(--et-logo-ink);
}
.et-logo .teal {
  fill: var(--et-logo-teal);
}
.et-logo .orange {
  fill: var(--et-logo-orange);
}

/* Dark is the default; the theme script sets data-theme to dark|light before first paint. */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --et-bg: #090c10;
  --et-bg-alt: #0f1318;
  --et-surface: #131920;
  --et-text: #ced4da;
  --et-text-muted: #7a8694;
  --et-text-dim: #4a5563;
  --et-text-ui: #6b7480;
  --et-accent: #00c9b1;
  --et-accent-fg: #090c10;
  --et-accent-signal: #ff671f;
  --et-danger: #e8456a;
  --et-border: #1c2230;
  --et-border-input: #6b7480;
  --et-border-accent: rgb(0 201 177 / 0.3);
}

:root[data-theme='light'] {
  color-scheme: light;
  --et-bg: #f0f2f5;
  --et-bg-alt: #ffffff;
  --et-surface: #ffffff;
  --et-text: #090c10;
  --et-text-muted: #5a6373;
  --et-text-dim: #9aa3af;
  --et-text-ui: #5a6373;
  --et-accent: #007a6e;
  --et-accent-fg: #ffffff;
  --et-accent-signal: #b54a12;
  --et-danger: #c42b50;
  --et-border: #cdd3dc;
  --et-border-input: #5a6373;
  --et-border-accent: rgb(0 122 110 / 0.3);
}

/* Theme-independent tokens. */
:root {
  --et-space-1: 4px;
  --et-space-2: 8px;
  --et-space-3: 12px;
  --et-space-4: 16px;
  --et-space-5: 24px;
  --et-space-6: 32px;
  --et-space-7: 48px;
  --et-space-8: 64px;
  --et-z-base: 0;
  --et-z-sticky: 10;
  --et-z-sidebar: 20;
  --et-z-overlay: 30;
  --et-z-modal: 40;
  --et-z-toast: 50;
  --et-duration-fast: 120ms;
  --et-duration-base: 200ms;
}

/* Tailwind 4 utilities: bg-bg, bg-surface, text-text, text-text-muted, text-accent, border-border, rounded-md, shadow-soft, p-s4, font-mono ... */
@theme inline {
  --color-bg: var(--et-bg);
  --color-bg-alt: var(--et-bg-alt);
  --color-surface: var(--et-surface);
  --color-text: var(--et-text);
  --color-text-muted: var(--et-text-muted);
  --color-text-dim: var(--et-text-dim);
  --color-text-ui: var(--et-text-ui);
  --color-accent: var(--et-accent);
  --color-accent-fg: var(--et-accent-fg);
  --color-accent-signal: var(--et-accent-signal);
  --color-danger: var(--et-danger);
  --color-border: var(--et-border);
  --color-border-input: var(--et-border-input);
  --color-border-accent: var(--et-border-accent);
}

@theme {
  --font-sans: 'Oswald', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Oswald is listed after JetBrains Mono only to supply glyphs Mono lacks (the rupee sign U+20B9). */
  --font-mono: 'JetBrains Mono', 'Oswald', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spacing-s1: 4px;
  --spacing-s2: 8px;
  --spacing-s3: 12px;
  --spacing-s4: 16px;
  --spacing-s5: 24px;
  --spacing-s6: 32px;
  --spacing-s7: 48px;
  --spacing-s8: 64px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-soft: 0 8px 24px rgb(0 0 0 / 0.18);
}