/* The design tokens: the light and dark palettes, the type, a form
   field's and a button's size, and the typeface. This file alone declares the order of
   the layers.
   --paper is anything raised off the page: menus, popovers, cards, and
   dialogs. The surface roles name what paints the page itself (the
   page under the side panel and the views, the rail, the thread's
   column), the two messages, and the composer. In light each role is
   the token its surface has always used; in dark the page, the rail,
   and the column are one color, and what is raised is lighter.
   The grouped list (components.css) paints with its own roles: --raised
   is a card of rows and a form's field, a clear step off --paper (darker
   in light, lighter in dark), --raised-line the hairline between a card's
   rows, and --field-inset a field that sits inside a card. --float is a
   menu or popover over the page, --float-line its edge. --button-tint is
   a secondary button and --switch-off a switch's track while off; both
   read on the page and on a card alike. */
@layer tokens, base, components, views;

@layer tokens {
  :root {
    --bg: #fbfaf8;
    --paper: #ffffff;
    --side: #f4f3f0;
    --ink: #1b1a18;
    --ink-soft: #43403a;
    --muted: #6b675f;
    --faint: #8e8a82;
    --line: #ebe9e4;
    --rule: #dedbd5;
    --green: #166f6b;
    --green-dark: #125a57;
    --amber: #8b6022;
    --amber-bg: #f8f0de;
    --green-bg: #e6f1ef;
    --red: #9b3b25;
    --red-bg: #f8e8e2;
    --on-accent: #ffffff;
    --hover-tint: #1b1a180a;
    --selected-tint: #1b1a1812;
    --shadow-tint: #1b1a1814;
    --border-faint: #00000014;
    --shadow-pop: rgba(27, 26, 24, 0.12);
    --shadow-sheet: rgba(27, 26, 24, 0.16);
    --sans: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --badge-0: #166f6b;
    --badge-1: #3b5f7a;
    --badge-2: #8b6022;
    --badge-3: #9b3b25;
    --badge-4: #5a6a44;
    --badge-5: #6f4a66;
    --surface-page: var(--bg);
    --surface-rail: var(--side);
    --surface-column: var(--paper);
    --bubble-assistant: var(--bg);
    --bubble-assistant-border: var(--line);
    --bubble-user: #d6ecff;
    --bubble-user-ink: var(--ink);
    --bubble-user-link: var(--green);
    --bubble-user-code: rgba(27, 26, 24, 0.08);
    --composer: var(--paper);
    --raised: #f0efeb;
    --raised-line: #dfdcd5;
    --field-inset: #ffffff;
    --field-line: #dfdcd5;
    --float: #ffffff;
    --float-line: #e4e1db;
    --button-tint: #1b1a180f;
    --button-tint-hover: #1b1a181a;
    --switch-off: #d3d0c8;
    color-scheme: light;
    /* The brief's overlay sets its prose in this serif. */
    --brief-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  }

  :root[data-theme="dark"] {
    --bg: #18181a;
    --paper: #222225;
    --side: #131315;
    --ink: #ededef;
    --ink-soft: #c8c8cb;
    --muted: #a2a2a6;
    --faint: #8a8a8e;
    --line: #2c2c2f;
    --rule: #3a3a3e;
    --green: #63b8b0;
    --green-dark: #7bc9c1;
    --amber: #e4b96f;
    /* Each accent's background is the accent at 14% over --paper. */
    --amber-bg: #3d372f;
    --green-bg: #2b3738;
    --red: #ef927c;
    --red-bg: #3f3231;
    --on-accent: #131315;
    --hover-tint: #ffffff0c;
    --selected-tint: #ffffff17;
    --shadow-tint: #00000040;
    --border-faint: #ffffff16;
    --shadow-pop: rgba(0, 0, 0, 0.38);
    --shadow-sheet: rgba(0, 0, 0, 0.5);
    --badge-0: #63b8b0;
    --badge-1: #83acce;
    --badge-2: #e4b96f;
    --badge-3: #ef927c;
    --badge-4: #a9bd7e;
    --badge-5: #c99cbe;
    --surface-page: #18181a;
    --surface-rail: #18181a;
    --surface-column: #18181a;
    --bubble-assistant: #1f1f21;
    --bubble-assistant-border: transparent;
    --bubble-user: #9fcbf0;
    --bubble-user-ink: #131315;
    --bubble-user-link: #09544f;
    --bubble-user-code: rgba(19, 19, 21, 0.14);
    --composer: #2c2c2f;
    --raised: #313136;
    --raised-line: #414147;
    --field-inset: #232326;
    --field-line: transparent;
    --float: #2f2f34;
    --float-line: #ffffff14;
    --button-tint: #ffffff17;
    --button-tint-hover: #ffffff24;
    --switch-off: #55555c;
    color-scheme: dark;
  }

  /* A form field's size: a phone's by default, 44px tall for a finger and
     16px type so iOS does not zoom into a focused field; under a fine
     pointer, a desk's, in proportion to the 14px body text. Text inputs,
     selects, and text areas read these, never the chat composer. */
  :root {
    --field-height: 44px;
    --field-pad-y: 10px;
    --field-pad-x: 12px;
    --field-font: 16px;
    --field-area: 88px;
  }
  @media (hover: hover) and (pointer: fine) {
    :root {
      --field-height: 34px;
      --field-pad-y: 6px;
      --field-pad-x: 10px;
      --field-font: 14px;
      --field-area: 72px;
    }
  }

  /* The grouped list's shape: a card's and a menu's corners, a field's
     and a button's, a row's inset and least height, and a menu entry's
     height and corners. */
  :root {
    --radius-card: 12px;
    --radius-control: 10px;
    --row-inset: 16px;
    --row-height: 52px;
    --menu-row: 44px;
    --radius-entry: 8px;
  }

  /* A button's size, the field's height so a button beside a field lines
     up with it: 44px on a phone, 34px under a fine pointer, with padding
     in proportion. Buttons in forms, cards, dialogs, and headings read
     these; the round controls (send, quick chat, the rail, the floating
     toggle, bell, and menu) keep their own size. */
  :root {
    --control-height: var(--field-height);
    --control-pad-x: 16px;
    --control-pad-x-small: 12px;
  }
  @media (hover: hover) and (pointer: fine) {
    :root {
      --control-pad-x: 12px;
      --control-pad-x-small: 10px;
    }
  }

  /* Focus's typeface, served from this origin so the shell CSP stays 'self'. */
  @font-face {
    font-family: "Albert Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/albert-sans-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;
  }
}