/* Deskhaus design tokens: the one source for the website and the app. Clay Haus by day, After Hours by night.
   Night and Day follow <html data-theme="dark|light">; with no attribute (Auto) they follow the device.
   THE MASTER IS brand/tokens.css. site/assets/tokens.css (and the app's copy) must stay byte-for-byte the same:
   node site-tools/check-tokens.mjs and app/test/tokens-sync.test.ts both fail if they differ. Change the master, then copy it. */

:root {
  /* ---------- the fixed brand colours (never change with the theme) ---------- */
  --dh-tomato: #ff4b33;
  --dh-tomato-deep: #c9301d;
  --dh-mint: #9fe2bf;
  --dh-sun: #ffd23f;
  --dh-lilac: #c3b5f7;
  --dh-sky: #8ec5ff;
  --dh-black: #111111;
  --dh-white: #f4f4f0;
  --dh-on-accent: #111111; /* text on tomato, mint, sun, lilac, sky */

  /* ---------- type ---------- */
  --dh-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --dh-font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dh-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --dh-text-xs: 12px;
  --dh-text-sm: 14px;
  --dh-text-md: 16px;
  --dh-text-lg: 18px;
  --dh-text-xl: clamp(20px, 1.7vw, 24px);
  --dh-title-sm: clamp(24px, 2.6vw, 34px);
  --dh-title-md: clamp(32px, 4vw, 54px);
  --dh-title-lg: clamp(42px, 5.6vw, 84px);
  --dh-title-xl: clamp(44px, 5.4vw, 88px);
  --dh-leading-tight: 1;
  --dh-leading-body: 1.55;
  --dh-tracking-display: -0.04em;
  --dh-tracking-mono: 0.04em;

  /* ---------- shape ---------- */
  --dh-radius-xs: 8px;
  --dh-radius-sm: 12px;
  --dh-radius-md: 18px;
  --dh-radius-lg: 26px;
  --dh-radius-xl: 36px;
  --dh-radius-pill: 999px;
  --dh-key-edge: 5px;       /* how far a keycap stands up off its base */
  --dh-key-edge-down: 1px;  /* the same when pressed */

  /* ---------- motion ---------- */
  --dh-dur-press: 90ms;
  --dh-dur-fast: 160ms;
  --dh-dur-base: 280ms;
  --dh-dur-slow: 560ms;
  --dh-dur-scene: 1100ms;
  --dh-ease-out: cubic-bezier(.2, .8, .2, 1);
  --dh-ease-inout: cubic-bezier(.6, 0, .3, 1);
  --dh-ease-pop: cubic-bezier(.3, 1.5, .5, 1);

  /* ---------- Day: Clay Haus ---------- */
  --dh-paper: #f4f4f0;
  --dh-paper-warm: #fbf8f1;
  --dh-paper-deep: #e8e0cf;
  --dh-backdrop: radial-gradient(120% 90% at 50% 30%, #fbf8f1 0%, #f1ecdf 58%, #e6dfce 100%);
  --dh-surface: #fffdf8;
  --dh-surface-2: #f6f1e6;
  --dh-ink: #111111;
  --dh-ink-soft: #55524a;
  --dh-line: rgba(60, 40, 20, .14);
  --dh-shadow-soft: 0 1px 2px rgba(70, 45, 25, .10), 0 14px 34px -12px rgba(70, 45, 25, .22);
  --dh-shadow-lift: 0 2px 4px rgba(70, 45, 25, .12), 0 26px 56px -18px rgba(70, 45, 25, .30);
  --dh-key-base: #d9cfba;   /* the edge under a neutral key */
  --dh-focus: #c9301d;

  /* the glass recipe: our own, a capsule floating over the room */
  --dh-glass-bg: rgba(255, 253, 248, .66);
  --dh-glass-solid: #f6f2e8; /* what browsers without backdrop-filter get, and "reduce transparency" */
  --dh-glass-blur: blur(22px) saturate(180%);
  --dh-glass-shadow: 0 8px 32px rgba(40, 30, 20, .18), 0 1px 3px rgba(40, 30, 20, .12), inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(255, 255, 255, .78);
  --dh-glass-ink: #111111;
  --dh-glass-ink-soft: #4a473f;
  --dh-glass-well: rgba(120, 112, 96, .16);

  color-scheme: light;
}

/* ---------- Night: After Hours ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dh-paper: #141629;
    --dh-paper-warm: #232650;
    --dh-paper-deep: #0b0c1a;
    --dh-backdrop: radial-gradient(120% 100% at 50% 30%, #232650 0%, #141629 52%, #0b0c1a 100%);
    --dh-surface: #1d2038;
    --dh-surface-2: #262a48;
    --dh-ink: #f4f4f0;
    --dh-ink-soft: #bdbccb;
    --dh-line: rgba(244, 244, 240, .14);
    --dh-shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -12px rgba(0, 0, 0, .6);
    --dh-shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 26px 56px -18px rgba(0, 0, 0, .7);
    --dh-key-base: #0a0b18;
    --dh-focus: #ffd23f;
    --dh-glass-bg: rgba(34, 34, 56, .68);
    --dh-glass-solid: #24263f;
    --dh-glass-shadow: 0 10px 36px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 .5px rgba(255, 255, 255, .24);
    --dh-glass-ink: #ffffff;
    --dh-glass-ink-soft: #d0cfdc;
    --dh-glass-well: rgba(160, 160, 190, .16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --dh-paper: #141629;
  --dh-paper-warm: #232650;
  --dh-paper-deep: #0b0c1a;
  --dh-backdrop: radial-gradient(120% 100% at 50% 30%, #232650 0%, #141629 52%, #0b0c1a 100%);
  --dh-surface: #1d2038;
  --dh-surface-2: #262a48;
  --dh-ink: #f4f4f0;
  --dh-ink-soft: #bdbccb;
  --dh-line: rgba(244, 244, 240, .14);
  --dh-shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -12px rgba(0, 0, 0, .6);
  --dh-shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 26px 56px -18px rgba(0, 0, 0, .7);
  --dh-key-base: #0a0b18;
  --dh-focus: #ffd23f;
  --dh-glass-bg: rgba(34, 34, 56, .68);
  --dh-glass-solid: #24263f;
  --dh-glass-shadow: 0 10px 36px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 .5px rgba(255, 255, 255, .24);
  --dh-glass-ink: #ffffff;
  --dh-glass-ink-soft: #d0cfdc;
  --dh-glass-well: rgba(160, 160, 190, .16);
  color-scheme: dark;
}

/* ---------- reduced motion: every token duration goes to zero ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dh-dur-press: 0ms;
    --dh-dur-fast: 0ms;
    --dh-dur-base: 0ms;
    --dh-dur-slow: 0ms;
    --dh-dur-scene: 0ms;
  }
}

/* ---------- the glass surface: class it, or copy these lines. No blur means solid, never see-through and unreadable ---------- */
.dh-glass {
  background: var(--dh-glass-solid);
  color: var(--dh-glass-ink);
  box-shadow: var(--dh-glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dh-glass {
    background: var(--dh-glass-bg);
    -webkit-backdrop-filter: var(--dh-glass-blur);
    backdrop-filter: var(--dh-glass-blur);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .dh-glass {
    background: var(--dh-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}