/* Generated by scripts/gen_colors.py from design/colors.yaml — do not edit. */

/* The Dramless color roles (web/spec/001-foundation.md).
 *
 * Each role is one custom property that resolves per appearance, so a rule
 * names the role and never the appearance. `color-scheme` is declared with
 * them so the browser's own chrome — form controls, scrollbars, and the
 * canvas behind an overscroll — follows the appearance the roles follow.
 */
:root {
  color-scheme: light dark;

  /* The backdrop behind every screen — bars, headers, and the gaps around inset content. Doubles as the label on a negative fill, where the Wool/Ground pair is the value that reads. Palette: Wool / Ground. */
  --dramless-canvas: #EDE4D2;

  /* The content ground — cards, rows, list segments, and sheets, inset on the canvas. Palette: Cream / Crust. */
  --dramless-surface: #FFFDF8;

  /* Fills inside a surface — chips, progress tracks, pills, and wells. Palette: Sand / Loam. */
  --dramless-surface-muted: #F1E4CD;

  /* The user's own message in a conversation — a warm wash on the canvas, distinct from the surface a reply sits on, so the two sides of a transcript read apart by tone. Palette: apricot wash / Loam warmed. */
  --dramless-bubble: #F8E1C9;

  /* Separators, hairline borders, and the underline a card sits on. Not on a surfaceMuted well, where it vanishes in one theme or the other; a hairline there is textFaint at 40 %. Palette: Rope / Loam. */
  --dramless-divider: #E4D5BE;

  /* The dim behind a modal, drawn at partial alpha over whatever it covers. Palette: Ground. */
  --dramless-scrim: #241A12;

  /* Headings, body, amounts and ֏ — any glyph that reads as text. Palette: Roast / Parchment. */
  --dramless-text-primary: #3B2A20;

  /* Captions, footnotes, and the trailing detail of a row. Palette: Bark / Oat. */
  --dramless-text-secondary: #7A6248;

  /* Hairline captions, at 12pt semibold or larger and never below. Palette: Clay / Ash. */
  --dramless-text-faint: #947D61;

  /* The brand — the logo, the mark, and identity moments. Never a status color and never an action. Palette: nur. */
  --dramless-brand-accent: #C23A4B;

  /* The one filled button per screen. Never text, and never an indicator outside a filled container. Palette: apricot. */
  --dramless-accent: #F08A3C;

  /* The action hue as selection — the selected tab's or segment's label and glyph. Darkened for text duty in light; in dark it is the action value itself. Palette: apricot text / apricot. */
  --dramless-accent-text: #9B530D;

  /* Text and glyphs drawn on an accent or state fill. Palette: Roast / Ground. */
  --dramless-on-accent: #3B2A20;

  /* Links, field focus, the tint of every control the system tints, and the arc of an ungraded ring — calm emphasis that grades nothing. Palette: sky text / sky. */
  --dramless-info: #35597F;

  /* Money coming in, a balance in the black, and savings on track — as text. Palette: sevan text / sevan. */
  --dramless-positive: #3A6E64;

  /* The same state as a fill inside a track or well — progress and illustration, never small text and never an arc its track must carry. Palette: sevan fill / sevan. */
  --dramless-positive-fill: #7DB5AA;

  /* Getting tight against a limit — as text. Palette: mustard text / mustard. */
  --dramless-warning: #875C10;

  /* The same state as a fill — drab on purpose, so a warning never reads as a treat. Palette: mustard fill / mustard. */
  --dramless-warning-fill: #B4791C;

  /* Over budget, destructive actions, and errors — a hue of its own, apart from the brand's, so bad news never wears the brand. A label on its fill is canvas, not onAccent. Palette: brick. */
  --dramless-negative: #A8402A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dramless-canvas: #241A12;
    --dramless-surface: #332619;
    --dramless-surface-muted: #4A382A;
    --dramless-bubble: #4E3421;
    --dramless-divider: #4A382A;
    --dramless-scrim: #241A12;
    --dramless-text-primary: #F3E7D3;
    --dramless-text-secondary: #C4AE92;
    --dramless-text-faint: #8A755C;
    --dramless-brand-accent: #E05A6B;
    --dramless-accent: #FF9D4D;
    --dramless-accent-text: #FF9D4D;
    --dramless-on-accent: #241A12;
    --dramless-info: #7FA9D4;
    --dramless-positive: #9ED0C5;
    --dramless-positive-fill: #9ED0C5;
    --dramless-warning: #CE9430;
    --dramless-warning-fill: #CE9430;
    --dramless-negative: #E0714F;
  }
}