/* Design tokens, light and dark (design/redesign-2026-10/theme.css "tokens", NOTES.md §4).
   Light by default; dark from the OS unless the page pins a theme (html[data-theme]). Claude's
   paper and ink with one clay accent; every other hue means something (NOTES.md §5, base.css). */

/* Self-hosted fonts (SIL OFL 1.1, fonts/OFL-*.txt): no CDN at runtime. Variable files, latin and
   latin-ext; anything else falls back to the system stacks below. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens: light (default) */
:root {
  color-scheme: light;

  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* paper */
  --bg: #faf9f5;            /* the page */
  --bg-side: #f3f1ea;       /* sidebar */
  --surface: #ffffff;       /* cards, composer, sheets */
  --surface-2: #f4f2eb;     /* wells, inputs at rest, hover */
  --surface-3: #ebe8de;     /* selected row, pressed */
  --bubble: #efece3;        /* people's chat bubbles */
  --stage: #151513;         /* behind pictures and clips */
  --scrim: rgba(26, 25, 21, 0.38);

  /* ink */
  --ink: #1b1a17;
  --ink-2: #3f3d37;
  --ink-3: #6d6a61;
  --ink-4: #9d998e;
  --line: rgba(48, 42, 30, 0.1);
  --line-2: rgba(48, 42, 30, 0.17);
  --hover: rgba(48, 42, 30, 0.05);
  --press: rgba(48, 42, 30, 0.09);

  /* the one accent: clay */
  --accent: #c6613f;
  --accent-hover: #b4532f;
  --accent-ink: #ffffff;
  --accent-soft: rgba(198, 97, 63, 0.11);
  --focus: rgba(198, 97, 63, 0.55);

  /* tag ramp (see the table above) */
  --tone-ink-l: 0.47;
  --tone-ink-c: 0.13;
  --tone-dot-l: 0.64;
  --tone-dot-c: 0.16;
  --tone-fill-a: 0.12;
  --tone-edge-a: 0.26;
  --tone-solid-ink: #ffffff;

  /* hues */
  --hue-red: 27;
  --hue-orange: 52;
  --hue-amber: 80;
  --hue-yellow: 102;
  --hue-green: 150;
  --hue-teal: 192;
  --hue-blue: 248;
  --hue-indigo: 280;
  --hue-violet: 308;
  --hue-pink: 350;
  --hue-clay: 42;

  /* depth: rings and layered shadows instead of borders */
  --ring: 0 0 0 1px var(--line);
  --shadow-1: 0 0 0 1px rgba(48, 42, 30, 0.08), 0 1px 2px rgba(48, 42, 30, 0.05);
  --shadow-2: 0 0 0 1px rgba(48, 42, 30, 0.08), 0 2px 4px rgba(48, 42, 30, 0.04), 0 8px 20px -6px rgba(48, 42, 30, 0.1);
  --shadow-pop: 0 0 0 1px rgba(48, 42, 30, 0.09), 0 12px 28px -8px rgba(48, 42, 30, 0.22), 0 30px 60px -20px rgba(48, 42, 30, 0.22);
  --shadow-composer: 0 0 0 1px rgba(48, 42, 30, 0.1), 0 2px 6px rgba(48, 42, 30, 0.04), 0 12px 32px -12px rgba(48, 42, 30, 0.14);
  --img-outline: rgba(0, 0, 0, 0.1);

  /* shape: radii step by the padding between nested surfaces (outer = inner + padding) */
  --r-1: 5px;    /* labels, kbd */
  --r-2: 8px;    /* rows, small buttons */
  --r-3: 10px;   /* buttons, inputs */
  --r-4: 14px;   /* cards, media */
  --r-5: 20px;   /* panels, sheets, bubbles */
  --r-6: 24px;   /* the composer */

  /* type scale (about 1.2) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-med: 200ms;

  /* layout */
  --side-w: 268px;
  --lane: 46rem;          /* the chat column (T3's --chat-content-max-width) */
  --page: 72rem;          /* other pages */
  --gutter: 28px;
  --bar-h: 56px;
}

/* ---------------------------------------------------------------- tokens: dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #262624;
    --bg-side: #1f1e1c;
    --surface: #30302d;
    --surface-2: #2c2b29;
    --surface-3: #3a3936;
    --bubble: #1b1a18;
    --stage: #0f0f0e;
    --scrim: rgba(0, 0, 0, 0.55);
    --ink: #f4f2ec;
    --ink-2: #cbc8be;
    --ink-3: #9d9a91;
    --ink-4: #75726a;
    --line: rgba(242, 236, 222, 0.09);
    --line-2: rgba(242, 236, 222, 0.15);
    --hover: rgba(242, 236, 222, 0.05);
    --press: rgba(242, 236, 222, 0.09);
    --accent: #d97757;
    --accent-hover: #e3876a;
    --accent-ink: #1b1a17;
    --accent-soft: rgba(217, 119, 87, 0.16);
    --focus: rgba(217, 119, 87, 0.6);
    --tone-ink-l: 0.84;
    --tone-ink-c: 0.1;
    --tone-dot-l: 0.74;
    --tone-dot-c: 0.14;
    --tone-fill-a: 0.17;
    --tone-edge-a: 0.3;
    --tone-solid-ink: #1b1a17;
    --shadow-1: 0 0 0 1px rgba(242, 236, 222, 0.08), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 0 0 1px rgba(242, 236, 222, 0.08), 0 2px 4px rgba(0, 0, 0, 0.2), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 0 0 1px rgba(242, 236, 222, 0.1), 0 14px 32px -8px rgba(0, 0, 0, 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.5);
    --shadow-composer: 0 0 0 1px rgba(242, 236, 222, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
    --img-outline: rgba(255, 255, 255, 0.1);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #262624;
  --bg-side: #1f1e1c;
  --surface: #30302d;
  --surface-2: #2c2b29;
  --surface-3: #3a3936;
  --bubble: #1b1a18;
  --stage: #0f0f0e;
  --scrim: rgba(0, 0, 0, 0.55);
  --ink: #f4f2ec;
  --ink-2: #cbc8be;
  --ink-3: #9d9a91;
  --ink-4: #75726a;
  --line: rgba(242, 236, 222, 0.09);
  --line-2: rgba(242, 236, 222, 0.15);
  --hover: rgba(242, 236, 222, 0.05);
  --press: rgba(242, 236, 222, 0.09);
  --accent: #d97757;
  --accent-hover: #e3876a;
  --accent-ink: #1b1a17;
  --accent-soft: rgba(217, 119, 87, 0.16);
  --focus: rgba(217, 119, 87, 0.6);
  --tone-ink-l: 0.84;
  --tone-ink-c: 0.1;
  --tone-dot-l: 0.74;
  --tone-dot-c: 0.14;
  --tone-fill-a: 0.17;
  --tone-edge-a: 0.3;
  --tone-solid-ink: #1b1a17;
  --shadow-1: 0 0 0 1px rgba(242, 236, 222, 0.08), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 0 0 1px rgba(242, 236, 222, 0.08), 0 2px 4px rgba(0, 0, 0, 0.2), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 0 0 1px rgba(242, 236, 222, 0.1), 0 14px 32px -8px rgba(0, 0, 0, 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  --shadow-composer: 0 0 0 1px rgba(242, 236, 222, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --img-outline: rgba(255, 255, 255, 0.1);
}