/* The design tokens (blueprint/spec/design.md), as custom properties.
   Linked from both layouts before their own stylesheet, so the values
   live in one file and filt.css, app.css and admin.css name them only
   through these properties. One file rather than one per group,
   because static/ is flat and a chain of @imports is a chain of
   round trips.

   Colour: two grounds, and each hue twice. The bright value is a fill
   and only a fill, with ink on it; the dark value is what the hue
   writes with, text and hairlines. On the dark ground a hue writes
   with its bright value instead. That swap, and the grounds swapping,
   is the whole of the dark appearance, which follows the system
   setting: there is no in-app switch. */

:root {
  color-scheme: light dark;

  /* Grounds */
  --ground: #F4F2ED;
  --ground-raised: #FFFEFB;
  --ground-recessed: #EFEDE6;

  /* Ink */
  --ink: #12181F;
  --ink-secondary: rgba(18, 24, 31, 0.7);
  --ink-tertiary: rgba(18, 24, 31, 0.56);
  --ink-quaternary: rgba(18, 24, 31, 0.36);
  --hairline: rgba(18, 24, 31, 0.13);
  --hairline-soft: rgba(18, 24, 31, 0.09);
  --fill-subtle: #E2DFD8;
  --fill-faint: rgba(18, 24, 31, 0.05);

  /* A hue's tint is the ground a strip in that hue sits on. */
  --lime-tint: #EDF3DA;
  --amber-tint: #F0E7D6;
  --terracotta-tint: #F3DED8;
  --violet-tint: #EDE5F1;
  --amber-hairline: rgba(138, 90, 12, 0.22);

  /* The hues: bright (fill) and dark (write). */
  --lime-bright: #BEEA5C;
  --lime-dark: #54711A;
  /* The live dot on paper: the bright lime does not read at 7px. */
  --lime-dot: #8FC02E;
  --violet-bright: #B98CDE;
  --violet-dark: #6A3E93;
  --blue-bright: #6FA8E0;
  --blue-dark: #2C5C8F;
  --amber-bright: #E0A340;
  --amber-dark: #8A5A0C;
  --terracotta-bright: #DB6A52;
  --terracotta-dark: #A83B22;
  --cyan-bright: #4CD4DE;
  --cyan-dark: #156B72;

  /* Elevation. A card on paper has an edge and a whisper of shadow; on
     ink the raised fill alone separates it. */
  --border-card: rgba(0, 0, 0, 0.07);
  --card-border: 1px solid var(--border-card);
  --card-shadow: 0 1px 2px rgba(18, 24, 31, 0.04);
  --sheet-shadow: 0 -8px 40px rgba(18, 24, 31, 0.12);

  /* Type. The system face is the brand face; nothing is bundled. Every
     number is the monospace face with tabular figures. */
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --numeric: tabular-nums;

  --text-body: 15.5px;
  --text-meta-size: 12.5px;
  --text-timestamp: 12px;
  --text-band: 11px;
  --text-button: 14px;
  --text-bar: 13.5px;

  --tracking-band: 1.2px;
  --tracking-band-date: 0.6px;

  --leading-body: 1.5;
  --leading-tight: 1.15;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing and geometry. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 44px;

  --radius-pill: 19px;
  --radius-card: 15px;
  --radius-sheet: 26px;
  --radius-thumb: 6px;
  --radius-step: 8px;

  --h-button: 38px;
  --h-button-small: 30px;
  --size-avatar: 24px;
  --size-dot: 7px;

  /* Motion. There is almost none: the breathing dot is the signature. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-breathe: 3.2s;
  --dur-reveal: 0.32s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0C1219;
    --ground-raised: #161F29;
    --ground-recessed: #101822;

    --ink: #E6EBEE;
    --ink-secondary: rgba(230, 235, 238, 0.7);
    --ink-tertiary: rgba(230, 235, 238, 0.56);
    --ink-quaternary: rgba(230, 235, 238, 0.36);
    --hairline: rgba(255, 255, 255, 0.11);
    --hairline-soft: rgba(255, 255, 255, 0.09);
    --fill-subtle: #212C37;
    --fill-faint: rgba(255, 255, 255, 0.06);

    --lime-tint: #1B2414;
    --amber-tint: #2A2114;
    --terracotta-tint: #2E1A15;
    --violet-tint: #231A2E;
    --amber-hairline: rgba(224, 163, 64, 0.28);

    --lime-dark: #BEEA5C;
    --lime-dot: #BEEA5C;
    --violet-dark: #B98CDE;
    --blue-dark: #6FA8E0;
    --amber-dark: #E0A340;
    --terracotta-dark: #DB6A52;
    --cyan-dark: #4CD4DE;

    --border-card: transparent;
    --card-border: 1px solid transparent;
    --card-shadow: none;
    --sheet-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  }
}

@keyframes filt-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* The dot holds at full opacity and scale. The label and the colour
     still carry the state. */
  * { animation: none !important; transition: none !important; }
}