/* Terminal design tokens. Spec and contrast table: docs/design/tokens.md.
   Components use these custom properties only. Never type a color, a font or a
   duration into a component rule.

   Themes: light is the default. The dark values apply when the system prefers
   dark and nothing forces light, or when an element (usually <html>) carries
   data-theme="dark". data-theme="light" forces light. Any element can carry
   data-theme, so a block can show the other theme (the styleguide does this).
   The two dark blocks below must stay identical; test/design-tokens.test.js
   checks that and every contrast pair. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/fonts/archivo-800-wdth100-125-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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-400-700-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: "Martian Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("/fonts/martian-mono-400-700-wdth75-112-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;
}

/* Theme-independent tokens */
:root {
  /* Type families */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Display widths (Archivo has a width axis from 100% to 125%) */
  --stretch-display: 110%;
  --stretch-heading: 112%;
  --stretch-caps: 125%;
  /* Martian Mono runs narrower in tight numeric spots */
  --stretch-mono-tight: 88%;

  /* Type scale. Root is 16px; sizes are rem so they follow the reader's settings. */
  --text-hero: clamp(2rem, 1.1rem + 2.4vw, 3.05rem);
  --text-display: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  --text-display-s: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem);
  --text-heading: 1.15rem;
  --text-caps: 0.95rem;
  --text-title: 1.0625rem;
  --text-body: 0.9375rem;
  --text-s: 0.875rem;
  --text-xs: 0.8125rem;
  --text-2xs: 0.75rem;
  --text-label: 0.6875rem;
  --text-num-xl: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  --text-num-l: 1.5rem;
  --text-num: 1rem;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.5;

  --tracking-display: -0.025em;
  --tracking-caps: 0.07em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 650;
  --weight-heavy: 700;
  --weight-display: 800;

  /* Spacing. Names are pixels at the default root size. */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* Radii */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-sheet: 18px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px;
  --border-strong: 1.5px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Sizes */
  --control-l: 3.25rem;
  --control-m: 2.75rem;
  --control-s: 2.25rem;
  --control-xs: 2rem;
  --target-min: 2.75rem;
  --icon-s: 0.875rem;
  --icon-m: 1rem;
  --icon-l: 1.375rem;

  /* Layout */
  --layout-max: 82.5rem;
  --layout-gutter: 1rem;
  --layout-gutter-wide: 1.75rem;
  --layout-read: 42rem;
  --topbar-height: 3.625rem;
  --tabbar-height: 3.5rem;
  --sheet-width: 29.375rem;
  --panel-width: 25rem;

  /* Motion. Durations are for transitions and one-shot animations. */
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --dur-arrive: 500ms;
  --dur-stamp: 600ms;
  --dur-draw: 1100ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.4);
  --ease-linear: linear;

  /* Stacking */
  --z-raised: 2;
  --z-sticky: 30;
  --z-popover: 60;
  --z-sheet: 80;
  --z-toast: 90;
}

/* Light theme (default) */
:root,
[data-theme="light"] {
  color-scheme: light;

  --c-bg: #EBEFED;
  --c-surface: #F7F9F8;
  --c-fill: #E1E8E5;
  --c-fill-strong: #D2DBD7;

  --c-ink: #0C1A1D;
  --c-ink-2: #3C4E53;
  --c-ink-3: #56686D;

  --c-line: #C9D3CF;
  --c-line-strong: #74857F;
  --c-grid: #C3CEC9;
  --c-grid-2: #D8E0DC;

  --c-up: #008873;
  --c-down: #CF463E;
  --c-up-text: #00735F;
  --c-down-text: #B83A33;
  --c-up-wash: #E3F0ED;
  --c-down-wash: #F4ECEB;

  --c-mark: #DD9314;
  --c-mark-line: #A86B00;
  --c-mark-text: #8F5B00;
  --c-on-mark: #1D1400;
  --c-mark-wash: #F3E9D4;

  --c-focus: #1F5FD1;
  --c-action: #0C1A1D;
  --c-on-action: #F7F9F8;
  --c-danger: #B83A33;
  --c-on-danger: #FFFFFF;
  --c-inverse: #0C1A1D;
  --c-on-inverse: #F7F9F8;
  --c-inverse-accent: #DD9314;

  --c-scrim: rgba(12, 26, 29, 0.42);
  --c-frame: #13262A;
  --c-chat-bg: #CFDDD6;
  --c-chat-dot: rgba(12, 26, 29, 0.07);
  --c-chat-in: #FFFFFF;
  --c-chat-me: #D3EEE2;
  --c-chat-key: #5B6E6A;
  --c-on-chat-key: #FFFFFF;
  --c-chat-service: #566463;
  --c-on-chat-service: #FFFFFF;

  --shadow-1: 0 1px 2px rgba(12, 26, 29, 0.14);
  --shadow-2: 0 1px 2px rgba(12, 26, 29, 0.06), 0 14px 34px -18px rgba(12, 26, 29, 0.3);
  --shadow-3: 0 2px 6px rgba(12, 26, 29, 0.08), 0 24px 56px -20px rgba(12, 26, 29, 0.38);
}

/* Dark theme, forced */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0E171A;
  --c-surface: #142124;
  --c-fill: #1B2A2E;
  --c-fill-strong: #253539;

  --c-ink: #E3ECE9;
  --c-ink-2: #A8B8B5;
  --c-ink-3: #869893;

  --c-line: #27373B;
  --c-line-strong: #66797D;
  --c-grid: #2E4045;
  --c-grid-2: #203034;

  --c-up: #00A89F;
  --c-down: #E46157;
  --c-up-text: #2CC2B5;
  --c-down-text: #FF8076;
  --c-up-wash: #122F30;
  --c-down-wash: #292729;

  --c-mark: #F9B73F;
  --c-mark-line: #F9B73F;
  --c-mark-text: #F9B73F;
  --c-on-mark: #1D1400;
  --c-mark-wash: #262D26;

  --c-focus: #8FB4FF;
  --c-action: #E3ECE9;
  --c-on-action: #0E171A;
  --c-danger: #FF8076;
  --c-on-danger: #1A0907;
  --c-inverse: #E3ECE9;
  --c-on-inverse: #0E171A;
  --c-inverse-accent: #7A4E00;

  --c-scrim: rgba(0, 0, 0, 0.6);
  --c-frame: #2B3C40;
  --c-chat-bg: #0F1B1E;
  --c-chat-dot: rgba(227, 236, 233, 0.05);
  --c-chat-in: #1B2A2E;
  --c-chat-me: #173F39;
  --c-chat-key: #2A3E42;
  --c-on-chat-key: #E3ECE9;
  --c-chat-service: #313C3E;
  --c-on-chat-service: #E3ECE9;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -22px rgba(0, 0, 0, 0.8);
  --shadow-3: 0 2px 8px rgba(0, 0, 0, 0.5), 0 28px 64px -24px rgba(0, 0, 0, 0.9);
}

/* Dark theme, from the system setting. Keep identical to the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg: #0E171A;
    --c-surface: #142124;
    --c-fill: #1B2A2E;
    --c-fill-strong: #253539;

    --c-ink: #E3ECE9;
    --c-ink-2: #A8B8B5;
    --c-ink-3: #869893;

    --c-line: #27373B;
    --c-line-strong: #66797D;
    --c-grid: #2E4045;
    --c-grid-2: #203034;

    --c-up: #00A89F;
    --c-down: #E46157;
    --c-up-text: #2CC2B5;
    --c-down-text: #FF8076;
    --c-up-wash: #122F30;
    --c-down-wash: #292729;

    --c-mark: #F9B73F;
    --c-mark-line: #F9B73F;
    --c-mark-text: #F9B73F;
    --c-on-mark: #1D1400;
    --c-mark-wash: #262D26;

    --c-focus: #8FB4FF;
    --c-action: #E3ECE9;
    --c-on-action: #0E171A;
    --c-danger: #FF8076;
    --c-on-danger: #1A0907;
    --c-inverse: #E3ECE9;
    --c-on-inverse: #0E171A;
    --c-inverse-accent: #7A4E00;

    --c-scrim: rgba(0, 0, 0, 0.6);
    --c-frame: #2B3C40;
    --c-chat-bg: #0F1B1E;
    --c-chat-dot: rgba(227, 236, 233, 0.05);
    --c-chat-in: #1B2A2E;
    --c-chat-me: #173F39;
    --c-chat-key: #2A3E42;
    --c-on-chat-key: #E3ECE9;
    --c-chat-service: #313C3E;
    --c-on-chat-service: #E3ECE9;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -22px rgba(0, 0, 0, 0.8);
    --shadow-3: 0 2px 8px rgba(0, 0, 0, 0.5), 0 28px 64px -24px rgba(0, 0, 0, 0.9);
  }
}