/* elmbench UI — design tokens.
 *
 * One visual language for every elmbench surface. Each app carries its own copy
 * of this kit (see MANIFEST.json); nothing is loaded across origins and nothing
 * comes from the internet. Documentation: docs/elmbench-ui.md in the platform
 * repository.
 *
 * Theme: follows the device by default. `data-theme="light"` or `"dark"` on <html>
 * pins it; any other value (or none) means "follow the device".
 *
 * Values are plain hex/rgb so pages render the same on older phones that lack
 * oklch(). Apps alias their own variables to these; they do not redefine them.
 */

:root {
  color-scheme: light;

  /* brand teal */
  --eb-brand: #0f766e;
  --eb-brand-deep: #0c4f4b;
  --eb-brand-bright: #14b8a6;
  --eb-brand-gradient: linear-gradient(145deg, #0c4f4b, #0f766e 62%, #15847b);

  /* surfaces */
  --eb-bg: #f3f8f7;
  --eb-surface: #ffffff;
  --eb-surface-2: #edf4f3;
  --eb-surface-3: #e1ebea;
  --eb-hover: rgb(15 118 110 / 0.06);
  --eb-border: #d6e3e1;
  --eb-border-strong: #b8cbc9;
  --eb-overlay: rgb(8 28 30 / 0.45);

  /* ink */
  --eb-ink: #142a2c;
  --eb-ink-2: #3c5457;
  --eb-ink-3: #5c7174;
  --eb-ink-inverse: #ffffff;

  /* accent (interactive) */
  --eb-accent: #0f766e;
  --eb-accent-hover: #0b5f59;
  --eb-accent-soft: rgb(15 118 110 / 0.1);
  --eb-accent-line: rgb(15 118 110 / 0.32);
  --eb-on-accent: #ffffff;
  --eb-focus: rgb(20 184 166 / 0.6);

  /* meaning: the same colour means the same thing on every surface */
  --eb-ok: #15803d;
  --eb-ok-soft: rgb(21 128 61 / 0.1);
  --eb-warn: #b45309;
  --eb-warn-soft: rgb(217 119 6 / 0.12);
  --eb-danger: #b91c1c;
  --eb-danger-soft: rgb(185 28 28 / 0.09);
  --eb-info: #0369a1;
  --eb-info-soft: rgb(3 105 161 / 0.09);

  /* type: Persian-first, one face for both scripts */
  --eb-font: 'Vazirmatn Variable', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --eb-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace;
  --eb-text-xs: 12px;
  --eb-text-sm: 13px;
  --eb-text-md: 14px;
  --eb-text-base: 15px;
  --eb-text-lg: 17px;
  --eb-text-xl: 20px;
  --eb-text-2xl: 24px;
  --eb-text-3xl: 30px;
  --eb-leading: 1.6;

  /* space (4px grid) */
  --eb-s-1: 4px;
  --eb-s-2: 8px;
  --eb-s-3: 12px;
  --eb-s-4: 16px;
  --eb-s-5: 20px;
  --eb-s-6: 24px;
  --eb-s-8: 32px;
  --eb-s-10: 40px;
  --eb-s-12: 48px;

  /* geometry */
  --eb-r-xs: 6px;
  --eb-r-sm: 10px;
  --eb-r-md: 14px;
  --eb-r-lg: 20px;
  --eb-r-xl: 28px;
  --eb-r-pill: 999px;
  --eb-tap: 44px;
  --eb-topbar-h: 56px;
  --eb-sidebar-w: 240px;

  --eb-shadow-1: 0 1px 2px rgb(12 50 48 / 0.06), 0 6px 18px -10px rgb(12 50 48 / 0.18);
  --eb-shadow-2: 0 2px 6px rgb(12 50 48 / 0.08), 0 22px 44px -18px rgb(12 50 48 / 0.3);

  --eb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --eb-dur-fast: 120ms;
  --eb-dur: 220ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --eb-bg: #0a1416;
    --eb-surface: #102023;
    --eb-surface-2: #15292d;
    --eb-surface-3: #1c3439;
    --eb-hover: rgb(94 234 212 / 0.06);
    --eb-border: #1f3439;
    --eb-border-strong: #2c474d;
    --eb-overlay: rgb(0 0 0 / 0.6);
    --eb-ink: #e4efee;
    --eb-ink-2: #b3c6c5;
    --eb-ink-3: #85999a;
    --eb-ink-inverse: #06191b;
    --eb-accent: #2dd4bf;
    --eb-accent-hover: #5eead4;
    --eb-accent-soft: rgb(45 212 191 / 0.13);
    --eb-accent-line: rgb(45 212 191 / 0.34);
    --eb-on-accent: #04201d;
    --eb-focus: rgb(94 234 212 / 0.6);
    --eb-ok: #4ade80;
    --eb-ok-soft: rgb(74 222 128 / 0.13);
    --eb-warn: #fbbf24;
    --eb-warn-soft: rgb(251 191 36 / 0.13);
    --eb-danger: #f87171;
    --eb-danger-soft: rgb(248 113 113 / 0.13);
    --eb-info: #7dd3fc;
    --eb-info-soft: rgb(125 211 252 / 0.13);
    --eb-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px -10px rgb(0 0 0 / 0.6);
    --eb-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 22px 44px -18px rgb(0 0 0 / 0.75);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --eb-bg: #0a1416;
  --eb-surface: #102023;
  --eb-surface-2: #15292d;
  --eb-surface-3: #1c3439;
  --eb-hover: rgb(94 234 212 / 0.06);
  --eb-border: #1f3439;
  --eb-border-strong: #2c474d;
  --eb-overlay: rgb(0 0 0 / 0.6);
  --eb-ink: #e4efee;
  --eb-ink-2: #b3c6c5;
  --eb-ink-3: #85999a;
  --eb-ink-inverse: #06191b;
  --eb-accent: #2dd4bf;
  --eb-accent-hover: #5eead4;
  --eb-accent-soft: rgb(45 212 191 / 0.13);
  --eb-accent-line: rgb(45 212 191 / 0.34);
  --eb-on-accent: #04201d;
  --eb-focus: rgb(94 234 212 / 0.6);
  --eb-ok: #4ade80;
  --eb-ok-soft: rgb(74 222 128 / 0.13);
  --eb-warn: #fbbf24;
  --eb-warn-soft: rgb(251 191 36 / 0.13);
  --eb-danger: #f87171;
  --eb-danger-soft: rgb(248 113 113 / 0.13);
  --eb-info: #7dd3fc;
  --eb-info-soft: rgb(125 211 252 / 0.13);
  --eb-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px -10px rgb(0 0 0 / 0.6);
  --eb-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 22px 44px -18px rgb(0 0 0 / 0.75);
}