/* Entune website: design tokens.
   Every colour, size, radius, shadow and motion value used on entune.app.
   Component styles (site.css, guide.css) read these variables only.

   The palette is the app's own Paper theme (src/entune/web/tokens.css in the
   entune repository): warm paper and ink neutrals with Entune lavender as the
   only accent. Token names match the app's wherever the meaning is the same.

   The site renders in light. Dark values exist for the dark half of the hero
   comparison and for a possible later dark mode (data-theme="dark"). */

:root {
  color-scheme: light;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --h1-size: 68px; --h1-lh: 1.04; --h1-weight: 600; --h1-track: -0.035em;
  --h2-size: 46px; --h2-lh: 1.04; --h2-weight: 600; --h2-track: -0.035em;
  --h3-size: 34px; --h3-lh: 1.1;
  --stat-size: 40px; --stat-track: -0.03em;
  --title-lg: 26px;
  --title-md: 21px;
  --title-sm: 19px;
  --title-xs: 17px;
  --lead-lg: 19px;
  --lead: 17px;
  --body: 16px;
  --body-sm: 15px;
  --body-xs: 14.5px;
  --small: 14px;
  --caption: 13px;
  --caption-sm: 12.5px;
  --micro: 12px;
  --eyebrow-size: 13px; --eyebrow-track: 0.06em;
  --label-size: 11.5px; --label-track: 0.07em;
  --lh-tight: 1.04; --lh-snug: 1.25; --lh-body: 1.6; --lh-caption: 1.5;

  /* Layout */
  --container: 1120px;
  --gutter: 48px;
  --section-y: 128px;
  --nav-h: 68px;
  --hero-window-max: 1080px;
  --hero-window-h: 640px;

  /* Radii */
  --r-pill: 999px;
  --r-5: 5px;
  --r-7: 7px;
  --r-8: 8px;
  --r-9: 9px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --r-18: 18px;
  --r-22: 22px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-flow: cubic-bezier(.45, 0, .2, 1);
  --ease-std: ease;
  --dur-fast: .2s;
  --dur-base: .3s;
  --dur-slow: .55s;
  --dur-reveal: .6s;

  /* Colour: light */
  --surface: #f7f5f1;
  --surface-alt: #efece6;
  --card: #fffdfa;
  --well: #e6e2da;
  --control-hover: #ebe7e0;
  --segment-on: #fffdfa;
  --track: #d6d0c6;

  --line-faint: rgba(60, 45, 20, .05);
  --line-soft: rgba(60, 45, 20, .08);
  --line: rgba(60, 45, 20, .10);
  --line-strong: rgba(60, 45, 20, .14);
  --line-control: rgba(60, 45, 20, .16);
  --chip: rgba(60, 45, 20, .06);
  --hover-wash: rgba(60, 45, 20, .03);

  --text-strong: #1f1c19;
  --text: #2a2724;
  --text-soft: #5a554e;
  --text-muted: #69635a;
  --text-dim: #847e74;
  --text-faint: #a59e93;

  --brand: #a99cf2;
  --brand-mark: #6c5cd8;
  --accent: #6f5fd8;
  --accent-text: #5847c2;
  --accent-hover: #3f2fa8;
  --accent-wash: rgba(111, 95, 216, .12);
  --accent-wash-soft: rgba(111, 95, 216, .05);
  --accent-ring: rgba(111, 95, 216, .40);
  --accent-dash: rgba(111, 95, 216, .45);
  --on-accent: #ffffff;

  --ink: #1f1c19;
  --ink-hover: #3a3632;
  --on-ink: #f7f5f1;

  --ok: #248a3d;          --ok-wash: rgba(36, 138, 61, .12);  --ok-text: #1d7334;
  --error: #d70015;       --error-ring: rgba(215, 0, 21, .35);
  --warning: #b25e00;     --warning-wash: rgba(255, 149, 0, .14);
  --notice: rgba(255, 149, 0, .10);
  --recording: #ff383c;

  --wave: #dcd6cc;        --wave-played: #7d6de0;  --wave-file: #c9c2b6;
  --pill-ground: rgba(255, 253, 250, .95);  /* the dictation pill: the app's own --pill-* tokens */
  --pill-bars: #7d6de0;
  --pill-quiet: #a59e93;
  --pill-sweep: rgba(111, 95, 216, .55);
  --pill-dot: #ff383c;
  --pill-shadow: 0 0 0 .5px rgba(60, 45, 20, .14), 0 10px 28px rgba(60, 45, 20, .16);
  --traffic-red: #ff5f57; --traffic-yellow: #febc2e; --traffic-green: #28c840;

  /* The app window inside the hero (History view) */
  --app-toolbar: #efece6;
  --app-select: #fffdfa;
  --app-edge: rgba(60, 45, 20, .10);
  --app-card-edge: rgba(60, 45, 20, .06);
  --app-card-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(60, 45, 20, .07), 0 0 0 1px rgba(60, 45, 20, .06);
  --app-live-ring: rgba(111, 95, 216, .45);
  --app-card-drop: 0 1px 3px rgba(60, 45, 20, .07);

  /* Feature path nodes, icon rings and bar tracks */
  --node-ring: rgba(60, 45, 20, .20);
  --node-ring-lit: rgba(111, 95, 216, .25);
  --ring-icon: rgba(60, 45, 20, .18);
  --bar-track: rgba(60, 45, 20, .07);

  /* Theme comparison controls: the same over both themes */
  --knob: #fffdfa;
  --knob-ink: #5847c2;
  --glass-dark: rgba(28, 27, 25, .78);
  --glass-dark-edge: rgba(255, 248, 235, .14);
  --glass-dark-text: #f1ede6;
  --glass-dark-dot: #1c1b19;
  --glass-light: rgba(255, 253, 250, .86);
  --glass-light-edge: rgba(60, 45, 20, .14);
  --glass-light-text: #1f1c19;

  /* Shadows */
  --shadow-window: 0 0 0 1px rgba(60, 45, 20, .12), 0 2px 4px rgba(60, 45, 20, .04), 0 44px 90px -28px rgba(60, 45, 20, .32);
  --shadow-edge: 0 0 0 1px var(--line-soft);
  --shadow-card-raised: 0 0 0 1px var(--line-soft), 0 20px 50px -20px rgba(60, 45, 20, .18);
  --shadow-stage: 0 0 0 1px var(--line-soft), 0 30px 70px -30px rgba(60, 45, 20, .25);
  --shadow-station: 0 0 0 1px var(--line-soft), 0 24px 50px -28px rgba(60, 45, 20, .25);
  --shadow-tile: 0 0 0 1px var(--line-soft), 0 12px 30px -16px rgba(60, 45, 20, .22);
  --shadow-command: 0 0 0 1px rgba(60, 45, 20, .12), 0 1px 2px rgba(60, 45, 20, .06);
  --shadow-segment: 0 1px 2px rgba(60, 45, 20, .12);
  --shadow-chip-lift: 0 1px 2px rgba(60, 45, 20, .08);
  --shadow-file: 0 6px 16px rgba(60, 45, 20, .16);
  --shadow-knob: 0 0 0 1px rgba(60, 45, 20, .14), 0 8px 22px rgba(0, 0, 0, .30);
  --shadow-switch-knob: 0 1px 3px rgba(0, 0, 0, .25);
  --focus: 0 0 0 3px rgba(169, 156, 242, .6);
  --focus-color: rgba(169, 156, 242, .6);
}

/* Colour: dark. The dark half of the hero comparison, and a possible later
   dark site. */
[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --surface: #1c1b19;
  --surface-alt: #171614;
  --card: #282624;
  --well: #171614;
  --control-hover: #383532;
  --segment-on: #4b4844;
  --track: #44413d;

  --line-faint: rgba(255, 248, 235, .05);
  --line-soft: rgba(255, 248, 235, .08);
  --line: rgba(255, 248, 235, .08);
  --line-strong: rgba(255, 248, 235, .12);
  --line-control: rgba(255, 248, 235, .15);
  --chip: rgba(255, 248, 235, .06);
  --hover-wash: rgba(255, 248, 235, .03);

  --text-strong: #f1ede6;
  --text: #e6e2db;
  --text-soft: #b5afa5;
  --text-muted: #a19b91;
  --text-dim: #8f897f;
  --text-faint: #736e66;

  --brand-mark: #a99cf2;
  --accent: #a99cf2;
  --accent-text: #bdb2ff;
  --accent-hover: #d4ccff;
  --accent-wash: rgba(169, 156, 242, .18);
  --accent-wash-soft: rgba(169, 156, 242, .06);
  --accent-ring: rgba(169, 156, 242, .45);
  --accent-dash: rgba(169, 156, 242, .5);
  --on-accent: #1c1b19;

  --ink: #f1ede6;
  --ink-hover: #ffffff;
  --on-ink: #1c1b19;

  --ok: #30d158;          --ok-wash: rgba(48, 209, 88, .16);  --ok-text: #30d158;
  --error: #ff4245;       --error-ring: rgba(255, 66, 69, .40);
  --warning: #ffb340;     --warning-wash: rgba(255, 159, 10, .15);
  --notice: rgba(255, 159, 10, .12);
  --recording: #ff4245;

  --wave: #4a4641;        --wave-played: #a99cf2;  --wave-file: #5a554e;
  --pill-ground: rgba(38, 36, 34, .94);
  --pill-bars: #a99cf2;
  --pill-quiet: #736e66;
  --pill-sweep: rgba(196, 185, 255, .9);
  --pill-dot: #ff4245;
  --pill-shadow: 0 0 0 .5px rgba(255, 248, 235, .14), 0 10px 28px rgba(0, 0, 0, .5);

  --app-toolbar: #262422;
  --app-select: #2f2d2a;
  --app-edge: rgba(255, 248, 235, .10);
  --app-card-edge: rgba(255, 248, 235, .03);
  --app-card-shadow: 0 1px 0 rgba(255, 248, 235, .04) inset, 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 248, 235, .03);
  --app-live-ring: rgba(169, 156, 242, .5);
  --app-card-drop: 0 1px 3px rgba(0, 0, 0, .35);
  --node-ring: rgba(255, 248, 235, .20);
  --node-ring-lit: rgba(169, 156, 242, .30);
  --ring-icon: rgba(255, 248, 235, .18);
  --bar-track: rgba(255, 248, 235, .06);

  --shadow-window: 0 0 0 1px rgba(255, 248, 235, .1), 0 60px 120px -30px rgba(0, 0, 0, .75);
  --shadow-card-raised: 0 0 0 1px var(--line-soft), 0 20px 50px -20px rgba(0, 0, 0, .5);
  --shadow-stage: 0 0 0 1px var(--line-soft), 0 30px 70px -30px rgba(0, 0, 0, .6);
  --shadow-station: 0 0 0 1px var(--line-soft), 0 24px 50px -28px rgba(0, 0, 0, .6);
  --shadow-tile: 0 0 0 1px var(--line-soft), 0 12px 30px -16px rgba(0, 0, 0, .6);
  --shadow-command: inset 0 0 0 1px rgba(255, 248, 235, .12);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-chip-lift: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-file: 0 6px 16px rgba(0, 0, 0, .45);
}

/* Smaller screens keep the same palette with tighter type and spacing. */
@media (max-width: 900px) {
  :root {
    --gutter: 32px;
    --section-y: 96px;
    --h1-size: 52px;
    --h2-size: 38px;
    --h3-size: 28px;
  }
}
@media (max-width: 560px) {
  :root {
    --gutter: 20px;
    --section-y: 72px;
    --h1-size: 40px;
    --h2-size: 31px;
    --h3-size: 25px;
    --stat-size: 32px;
    --lead-lg: 17px;
    --lead: 16px;
  }
}