/* Snowball's design language, from the product's own token source (packages/tokens/tokens.json):
   a farm job board. Kraft board and paper tags by day, the dawn palette before sunrise; objects are
   drawn in ink; what you can press casts a hard shadow and sinks like a stamp. */
:root {
  color-scheme: light;

  /* kraft */
  --bg: #ede8dc;              /* board */
  --bg-deep: #e2dccb;         /* board-deep */
  --surface: #fbf8f0;         /* board-soft: paper pinned to the board */
  --surface-raised: #fffdf7;
  --tag: #f7f1e1;
  --fill: rgba(33, 29, 21, 0.05);
  --fill-strong: rgba(33, 29, 21, 0.09);
  --separator: #d7d0bd;       /* line */
  --separator-strong: #b9b19b;/* line-strong */
  --ink: #211d15;
  --ink-2: #5c564a;           /* ink-soft */
  --ink-3: #97907d;           /* ink-faint */
  --obj: #211d15;             /* obj-line: objects are drawn in ink */

  --accent: #e8a22b;          /* marigold: the one thing you can do next */
  --accent-hover: #efb14a;
  --accent-deep: #8a5e0c;
  --accent-ink: #211d15;
  --accent-soft: #f6e7c6;     /* marigold-wash */

  --red: #b3261e;             /* failure */
  --red-soft: #f8e2dd;
  --alarm: #a8420f;           /* alarm-field */
  --alarm-ink: #fff4ec;
  --orange: #a8420f;          /* st-blocked-ink */
  --orange-soft: #f9e4d8;     /* st-blocked-wash */
  --green: #2e7d46;           /* st-running */
  --green-soft: #e2efe5;
  --blue: #3a5380;            /* st-proposed: what Snowball proposes */
  --blue-soft: #e3e9f1;
  --done: #8c8470;            /* st-done */

  --tag-yellow: #f1c232;      /* the cow's ear tag */
  --tag-ink: #211d15;
  --sidebar: #e2dccb;
  --grain: rgba(33, 29, 21, 0.03);

  /* type: the product's ramp. Big, because it is read in barns. */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-large: 800 2.625rem/1.05 var(--font);
  --t-title1: 800 1.875rem/1.12 var(--font);
  --t-title2: 750 1.5rem/1.18 var(--font);
  --t-title3: 750 1.25rem/1.25 var(--font);
  --t-headline: 680 1.0625rem/1.35 var(--font);
  --t-body: 440 1.0625rem/1.5 var(--font);
  --t-callout: 460 1rem/1.45 var(--font);
  --t-subhead: 520 0.9375rem/1.4 var(--font);
  --t-footnote: 520 0.875rem/1.35 var(--font);
  --t-caption: 700 0.75rem/1.3 var(--font);
  --caps: 0.08em;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s8: 40px; --s10: 48px; --s12: 64px;
  --r-control: 3px;
  --r-card: 10px;
  --r-sheet: 10px;
  --r-pill: 999px;

  /* Only what you can press casts a shadow; it sinks when pressed. */
  --press-shadow: 3px 3px 0 rgba(33, 29, 21, 0.18);   /* shadow-mobile */
  --press-down: 1px 1px 0 rgba(33, 29, 21, 0.22);     /* shadow-press */
  --stamp-shadow: 2px 2px 0 rgba(33, 29, 21, 0.18);   /* shadow-stamp */
  --lift: 4px 4px 0 rgba(33, 29, 21, 0.14);
  --float: 6px 6px 0 rgba(33, 29, 21, 0.15), 0 18px 48px rgba(33, 29, 21, 0.12);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);             /* snap */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --stamp: cubic-bezier(0.34, 1.56, 0.64, 1);         /* stamp: lands with a little give */
  --fast: 120ms;
  --base: 180ms;
  --slow: 280ms;

  --touch: 48px;
  --touch-station: 72px;
}

/* dawn: the same board before sunrise */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15130e; --bg-deep: #1c1913; --surface: #1b1811; --surface-raised: #241f16; --tag: #241f16;
    --fill: rgba(235, 227, 209, 0.06); --fill-strong: rgba(235, 227, 209, 0.1);
    --separator: #393327; --separator-strong: #574e3c;
    --ink: #ebe3d1; --ink-2: #a79d87; --ink-3: #7c7361; --obj: #5a5240;
    --accent: #c88c25; --accent-hover: #d99d33; --accent-deep: #e5b45e; --accent-ink: #15130e; --accent-soft: #3a2e15;
    --red: #e0705f; --red-soft: #2e1710; --alarm: #5c2510; --alarm-ink: #f7dfd1;
    --orange: #f0906a; --orange-soft: #2e1710; --green: #5fb37d; --green-soft: #17281c;
    --blue: #7a96c7; --blue-soft: #1a2130; --done: #6a6353;
    --sidebar: #110f0b; --grain: rgba(0, 0, 0, 0.18);
    --press-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); --press-down: 1px 1px 0 rgba(0, 0, 0, 0.6); --stamp-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    --lift: 4px 4px 0 rgba(0, 0, 0, 0.45); --float: 6px 6px 0 rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15130e; --bg-deep: #1c1913; --surface: #1b1811; --surface-raised: #241f16; --tag: #241f16;
  --fill: rgba(235, 227, 209, 0.06); --fill-strong: rgba(235, 227, 209, 0.1);
  --separator: #393327; --separator-strong: #574e3c;
  --ink: #ebe3d1; --ink-2: #a79d87; --ink-3: #7c7361; --obj: #5a5240;
  --accent: #c88c25; --accent-hover: #d99d33; --accent-deep: #e5b45e; --accent-ink: #15130e; --accent-soft: #3a2e15;
  --red: #e0705f; --red-soft: #2e1710; --alarm: #5c2510; --alarm-ink: #f7dfd1;
  --orange: #f0906a; --orange-soft: #2e1710; --green: #5fb37d; --green-soft: #17281c;
  --blue: #7a96c7; --blue-soft: #1a2130; --done: #6a6353;
  --sidebar: #110f0b; --grain: rgba(0, 0, 0, 0.18);
  --press-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); --press-down: 1px 1px 0 rgba(0, 0, 0, 0.6); --stamp-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  --lift: 4px 4px 0 rgba(0, 0, 0, 0.45); --float: 6px 6px 0 rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.4);
}

/* The scale every screen is held to (DESIGN.md 8–9). Nothing in the system stylesheet uses a size,
   space or radius that isn't one of these. */
:root {
  --fs-1: 0.75rem;    /* caption, stamps */
  --fs-2: 0.8125rem;  /* footnote */
  --fs-3: 0.9375rem;  /* secondary */
  --fs-4: 1.0625rem;  /* body */
  --fs-5: 1.25rem;    /* row emphasis, card titles */
  --fs-6: 1.625rem;   /* figures */
  --fs-7: 2.25rem;    /* page titles, big figures */
  --fs-8: 3rem;       /* the headline on wide screens */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --rule: 1px solid var(--separator);
  --rule-strong: 1px solid var(--separator-strong);
  --move: 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}