/* ============================================================================
   tokens.css — every colour, size and motion value in the product.

   THIS IS THE ONLY FILE ALLOWED TO CONTAIN A COLOUR LITERAL. (Contract rule 4,
   enforced by pw-audit/tb-static.js.) Everything else — base.css,
   components.css, decor.css, sections.css, print.css and all eighteen views —
   reads from these custom properties. That is what makes the theme studio work
   at all: the previous build hard-coded Tailwind colours into every component,
   so switching theme changed the page background and nothing else.

   OWNERSHIP: Phase 0 froze the token NAMES. Agent A owns the VALUES and may add
   tokens, but may not rename or remove one without updating every consumer.

   ---------------------------------------------------------------------------
   HOW THE THEME ENGINE USES THIS FILE

   js/theme.js derives a full palette from a single seed — {hue, chroma, mode} —
   and writes the result as inline custom properties on :root. Inline style beats
   every rule here without needing !important, so this file supplies:

     (a) the default palette, which is what a first-time visitor sees before
         theme.js has run, and
     (b) the non-colour scale, which theme.js never touches.

   A preset and a custom colour run identical code, so a derivation bug is
   visible in the presets and the audit catches it.

   ONE TRAP, documented here because it costs an afternoon to rediscover:
   because the engine writes INLINE custom properties, print.css must mark its
   overrides !important on the custom-property declarations themselves. A
   [data-printing] attribute selector is not specific enough to beat inline
   style.
   ============================================================================ */

:root {
  color-scheme: light;

  /* -- Surfaces -------------------------------------------------------------
     bg is the desk the binder sits on; surface is the paper. surface-2 and -3
     are progressively deeper tints used for table headers, wells and hover. */
  --bg:          #FDF4F8;
  --bg-tint:     #FAE8F1;
  --surface:     #FFFFFF;
  --surface-2:   #FDF5F9;
  --surface-3:   #F8E7F0;

  /* -- Ink ------------------------------------------------------------------
     --ink is measured at 15.8:1 on --surface. theme.js re-derives it against
     the generated surface rather than assuming it stays readable. */
  --ink:         #2B1725;
  --ink-soft:    #6B4E62;
  --ink-faint:   #9C8296;

  /* -- Lines ----------------------------------------------------------------
     --line-strong is held at >=3:1 because WCAG treats a control border as
     non-text contrast, and an input nobody can see the edge of is a real bug. */
  --line:        #F2D9E6;
  --line-strong: #D9A8C4;

  /* -- Brand ----------------------------------------------------------------
     Derived, never typed, once theme.js runs. --on-brand is chosen per palette
     between white and near-black: hard-coding white is what makes a yellow
     brand colour unreadable. */
  --brand:        #C2266B;
  --brand-strong: #98104F;
  --brand-soft:   #FCE4EF;
  --on-brand:     #FFFFFF;

  /* -- Semantic -------------------------------------------------------------
     These carry MEANING and deliberately do NOT rotate with the brand hue. A
     green "Present" pill has to stay green even when the teacher picks a green
     brand colour, or the attendance grid stops being readable at a glance.
     theme.js only nudges their lightness to hold contrast on the new surface. */
  --accent:      #7A4FD1;   --accent-soft: #EFE7FC;
  --mint:        #10775A;   --mint-soft:   #DAF3EA;
  --amber:       #8A5A05;   --amber-soft:  #FBEEd4;
  --danger:      #B3261E;   --danger-soft: #FBE4E2;
  --info:        #1B5E8F;   --info-soft:   #DDEEF9;

  /* -- Rubric levels --------------------------------------------------------
     E/D/P/A read left-to-right as a ladder, so they map onto the semantic
     ramp rather than getting four arbitrary colours. */
  --level-e: var(--danger);  --level-e-soft: var(--danger-soft);
  --level-d: var(--amber);   --level-d-soft: var(--amber-soft);
  --level-p: var(--info);    --level-p-soft: var(--info-soft);
  --level-a: var(--mint);    --level-a-soft: var(--mint-soft);

  /* -- Attendance statuses --------------------------------------------------
     Unmarked is its own value, NOT present. The old build defaulted a missing
     record to Present, which made every untouched day report 100% attendance. */
  --att-p: var(--mint);     --att-a: var(--danger);   --att-t: var(--amber);
  --att-e: var(--info);     --att-h: var(--accent);   --att-unmarked: var(--line);

  /* -- Binder furniture -----------------------------------------------------
     The paper, the rule lines, the red margin, the metal rings and the washi
     tape. These are what make it read as a binder rather than a dashboard. */
  --paper:        var(--surface);
  --rule:         #E4EAF7;
  --margin-line:  #F19BC0;
  --ring-metal:   #B9BEC7;
  --ring-metal-hi:#FFFFFF;
  /* The inner highlight that makes a ring read as metal rather than as a grey
     lozenge. Its own token because it is a translucent white, and rule 4 has
     no "except for a little rgba" clause. */
  --ring-gloss:   rgb(255 255 255 / .55);
  --tape:         #F7C8DD;

  /* -- Section accent slot --------------------------------------------------
     A section owns a HUE INDEX, never a colour. app.js sets --sec-h from the
     section's slot and the ladder below computes the rest, so twelve sections
     stay a family under any brand colour with zero per-section CSS. */
  /* Chroma is deliberately high. The printable this product competes with is
     candy-bright — a different colour per letter of every heading, a different
     pastel per table column — and a tasteful muted palette reads as a business
     dashboard next to it, which is the wrong shelf. The lightness values still
     come from the contrast solver, so bright never means unreadable. */
  --sec-l: 0.56;   --sec-c: 0.175;
  --sec-strong-l: 0.44;
  --sec-soft-l: 0.93;  --sec-soft-c: 0.065;
  --sec-h: var(--h0);
  --sec-on: #FFFFFF;

  /* Twelve evenly-spaced hues. theme.js overwrites these as brandHue + k*30
     when "rainbow tabs" is on, or sets them all to the brand hue when off. */
  --h0:  348;  --h1:   18;  --h2:   48;  --h3:   78;
  --h4:  108;  --h5:  138;  --h6:  168;  --h7:  198;
  --h8:  228;  --h9:  258;  --h10: 288;  --h11: 318;

  /* -- Elevation and focus --------------------------------------------------
     Shadows are tinted toward the brand rather than neutral grey; a pure black
     shadow over a pink surface reads as dirt. */
  --shadow-sm: 0 1px 2px rgba(75, 20, 50, .07), 0 1px 3px rgba(75, 20, 50, .05);
  --shadow-md: 0 4px 10px rgba(75, 20, 50, .09), 0 2px 4px rgba(75, 20, 50, .06);
  --shadow-lg: 0 14px 34px rgba(75, 20, 50, .13), 0 4px 10px rgba(75, 20, 50, .07);
  --ring:      0 0 0 3px color-mix(in oklab, var(--brand) 34%, transparent);
  --wash:      rgba(58, 16, 40, .38);

  /* -- Type -----------------------------------------------------------------
     --font-display is the round, friendly face used for headings and the
     binder cover; --font-hand is used sparingly for sticky notes and doodle
     labels, never for anything a teacher has to read at length. */
  --font-sans:    'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Fredoka', var(--font-sans);
  /* The bouncy second word of a heading — "Class Roster", "Student Birthdays".
     That pairing of a bold rounded word with a script word is most of the
     character of the printable this competes with. */
  --font-script:  'Caveat', 'Segoe Script', cursive;
  --font-hand:    'Short Stack', var(--font-sans);
  --font-mono:    ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  /* Fluid scale. Clamped so a 360px phone and a 1440px desktop both land in a
     readable range without a media query per component. */
  --step--1: clamp(.75rem,  .72rem + .12vw, .82rem);
  --step-0:  clamp(.875rem, .84rem + .16vw, .95rem);
  --step-1:  clamp(1rem,    .95rem + .24vw, 1.13rem);
  --step-2:  clamp(1.2rem,  1.1rem + .5vw,  1.45rem);
  --step-3:  clamp(1.5rem,  1.3rem + .9vw,  2rem);
  --step-4:  clamp(1.9rem,  1.5rem + 1.8vw, 2.9rem);

  /* -- Space, radii, motion -------------------------------------------------
     --tap is the minimum hit target. Teachers use this one-handed on a phone
     while holding a clipboard; 44px is not negotiable and the audit checks it. */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;
  --tap: 44px;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-1: 120ms;  --dur-2: 220ms;  --dur-3: 420ms;

  --shell: 1240px;   /* max content width */

  /* -- Rainbow table headers ------------------------------------------------
     Six column tints and their matching ink, cycled by nth-child in base.css.
     They live here rather than in base.css because rule 4 admits no exception:
     the moment one stylesheet is allowed "just a couple" of literals, the
     theme studio starts leaking colours it cannot recolour.

     Both halves are built from the hue ladder, so a teacher who picks her own
     brand colour gets her own six column tints for free. */
  --th-1:     oklch(var(--sec-soft-l) var(--sec-soft-c) var(--h0));
  --th-2:     oklch(var(--sec-soft-l) var(--sec-soft-c) var(--h2));
  --th-3:     oklch(var(--sec-soft-l) var(--sec-soft-c) var(--h4));
  --th-4:     oklch(var(--sec-soft-l) var(--sec-soft-c) var(--h6));
  --th-5:     oklch(var(--sec-soft-l) var(--sec-soft-c) var(--h8));
  --th-6:     oklch(var(--sec-soft-l) var(--sec-soft-c) var(--h10));
  --th-1-ink: oklch(0.42 0.13 var(--h0));
  --th-2-ink: oklch(0.42 0.13 var(--h2));
  --th-3-ink: oklch(0.42 0.13 var(--h4));
  --th-4-ink: oklch(0.42 0.13 var(--h6));
  --th-5-ink: oklch(0.42 0.13 var(--h8));
  --th-6-ink: oklch(0.42 0.13 var(--h10));

  /* -- Paper ----------------------------------------------------------------
     The neutral palette print.css drops to in ink-saver mode, and the three
     hues the printed cover sets its title in.

     Deliberately NOT var(--ink) and friends: the whole point of ink-saver is
     to leave the screen palette behind, so these are their own tokens rather
     than overrides of the screen ones. The cover hues still ride the ladder,
     so a themed binder prints a themed cover. */
  --print-ink:          #000000;
  --print-ink-soft:     #333333;
  --print-ink-faint:    #555555;
  --print-meta:         #444444;
  --print-surface:      #FFFFFF;
  --print-surface-2:    #F4F4F4;
  --print-line:         #BBBBBB;
  --print-line-strong:  #888888;
  --print-preview-ink:  #1A1A1A;

  --print-title-1: oklch(0.55 0.16 var(--h0));
  --print-title-2: oklch(0.55 0.16 var(--h3));
  --print-title-3: oklch(0.55 0.16 var(--h7));
  --print-year:    oklch(0.50 0.14 var(--h9));
  --print-motto:   oklch(0.78 0.10 var(--h0));
  --print-band:    oklch(0.55 0.14 var(--h0));
}

/* ---------------------------------------------------------------------------
   Dark mode — "Midnight Chalkboard". Every token is re-declared rather than
   patched, so no light value can leak through and become invisible text.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #17111A;
  --bg-tint:     #1F1724;
  --surface:     #221A28;
  --surface-2:   #2A2032;
  --surface-3:   #33273D;

  --ink:         #F6EDF4;
  --ink-soft:    #C6B2C4;
  --ink-faint:   #9A85A0;

  --line:        #392C43;
  --line-strong: #55415F;

  --brand:        #FF8FC0;
  --brand-strong: #FFB6D6;
  --brand-soft:   #3D2333;
  --on-brand:     #2B0F1E;

  --accent:      #C0A6FF;   --accent-soft: #2E2545;
  --mint:        #6FDCB4;   --mint-soft:   #16352C;
  --amber:       #F5C56B;   --amber-soft:  #3A2C13;
  --danger:      #FF9C93;   --danger-soft: #3E1F1D;
  --info:        #8CC8F0;   --info-soft:   #16303F;

  --paper:        var(--surface);
  --rule:         #2F2739;
  --margin-line:  #7A3A57;
  --ring-metal:   #6E7480;
  --ring-metal-hi:#B9BEC7;
  --tape:         #4A2A3C;

  --sec-l: 0.74;  --sec-c: 0.13;
  --sec-strong-l: 0.84;
  --sec-soft-l: 0.26;  --sec-soft-c: 0.05;
  --sec-on: #1B1220;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 16px 38px rgba(0, 0, 0, .62);
  --wash:      rgba(8, 4, 12, .66);
}

/* ---------------------------------------------------------------------------
   The section accent ladder.

   Twelve hue numbers, five ladder values and ONE rule compute every per-section
   colour in the product. This block is the reason no view file contains a hex.

   OKLCH rather than HSL on purpose: HSL lightness is not perceptual, so a fixed
   ladder at L:55% makes yellow glare and blue go muddy, and roughly half of the
   twelve sections would fail AA. OKLCH lightness IS perceptual, so one L holds
   contrast near-constant right around the wheel.
   --------------------------------------------------------------------------- */
@supports (color: oklch(0.5 0.1 0)) {
  [data-sec] {
    --sec:        oklch(var(--sec-l)        var(--sec-c)      var(--sec-h));
    --sec-strong: oklch(var(--sec-strong-l) var(--sec-c)      var(--sec-h));
    --sec-soft:   oklch(var(--sec-soft-l)   var(--sec-soft-c) var(--sec-h));
  }
}

/* Fallback for older Android WebViews, which a surprising number of school
   devices still ship. Duplicated on purpose — the alternative is no accent
   colour at all on those devices. */
@supports not (color: oklch(0.5 0.1 0)) {
  :root { --sec-sat: 58%; --sec-lum: 42%; --sec-soft-lum: 93%; }
  :root[data-theme="dark"] { --sec-sat: 62%; --sec-lum: 72%; --sec-soft-lum: 22%; }
  [data-sec] {
    --sec:        hsl(var(--sec-h) var(--sec-sat) var(--sec-lum));
    --sec-strong: hsl(var(--sec-h) var(--sec-sat) calc(var(--sec-lum) - 10%));
    --sec-soft:   hsl(var(--sec-h) calc(var(--sec-sat) - 30%) var(--sec-soft-lum));
  }
}

/* ---------------------------------------------------------------------------
   Motion. A teacher who has switched this on at the OS level has told us
   something; confetti and drifting doodles are exactly what they meant.
   js/fx.js also reads this so celebrations degrade to a toast instead of
   simply being skipped.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== BAKED PRESET PALETTES — GENERATED BY pw-audit/tb-bake.js ===== */
/*
   Do not hand-edit. Regenerate with:  node pw-audit/tb-bake.js

   Each block is the exact output of Theme.derive() for that preset, so a
   preset and a custom colour are guaranteed to run through identical maths.
   Every value here was produced by the contrast solver: --brand clears 4.5:1
   on --surface, --line-strong clears 3:1, and one --sec-l is solved to hold
   4.5:1 across all twelve section hues at once.
*/

:root[data-preset="strawberry"] {
  --surface: #FFFCFD;
  --surface-2: #FEF2F7;
  --surface-3: #F7E6EE;
  --bg: #FFF5FA;
  --bg-tint: #FBEBF3;
  --ink: #37242E;
  --ink-soft: #6B5660;
  --ink-faint: #8F7D86;
  --line: #F9D5E6;
  --line-strong: #A98496;
  --brand: #B74E89;
  --brand-strong: #942E6A;
  --brand-soft: #FFDFEE;
  --on-brand: #FFFFFF;
  --accent: #6C51A9;
  --accent-soft: #E8E2FF;
  --mint: #0B784A;
  --mint-soft: #D7F1E0;
  --amber: #895900;
  --amber-soft: #F7E3CA;
  --danger: #AA3832;
  --danger-soft: #FFDDD9;
  --info: #1768A8;
  --info-soft: #D3E9FF;
  --rule: #D6E7F8;
  --margin-line: #E18EB9;
  --ring-metal: #BDB7BA;
  --ring-metal-hi: #FCF9FA;
  --tape: #FAC6DF;
  --h0: 348;
  --h1: 18;
  --h2: 48;
  --h3: 78;
  --h4: 108;
  --h5: 138;
  --h6: 168;
  --h7: 198;
  --h8: 228;
  --h9: 258;
  --h10: 288;
  --h11: 318;
  --sec-on: #FFFFFF;
  --sec-l: 0.5432;
  --sec-c: 0.0925;
  --sec-strong-l: 0.4397;
  --sec-soft-l: 0.9350;
  --sec-soft-c: 0.0240;
  --sec-sat: 39%;
  --sec-lum: 46%;
  --sec-soft-lum: 94%;
  --shadow-sm: 0 1px 2px rgba(68, 20, 48, 0.07), 0 1px 3px rgba(68, 20, 48, 0.050);
  --shadow-md: 0 4px 10px rgba(68, 20, 48, 0.09), 0 2px 4px rgba(68, 20, 48, 0.061);
  --shadow-lg: 0 14px 34px rgba(68, 20, 48, 0.13), 0 4px 10px rgba(68, 20, 48, 0.072);
  --ring: 0 0 0 3px rgba(183, 78, 137, .34);
  --wash: rgba(48, 10, 32, .42);
  color-scheme: light;
}

:root[data-preset="strawberry"][data-mono] {
  --h0: 348;
  --h1: 348;
  --h2: 348;
  --h3: 348;
  --h4: 348;
  --h5: 348;
  --h6: 348;
  --h7: 348;
  --h8: 348;
  --h9: 348;
  --h10: 348;
  --h11: 348;
}

:root[data-preset="strawberry"][data-theme="dark"] {
  --surface: #241F21;
  --surface-2: #31282D;
  --surface-3: #42353B;
  --bg: #190F14;
  --bg-tint: #20161B;
  --ink: #F6DCE8;
  --ink-soft: #B9A3AD;
  --ink-faint: #93828A;
  --line: #482D3B;
  --line-strong: #886576;
  --brand: #CF649E;
  --brand-strong: #F789C3;
  --brand-soft: #371A2A;
  --on-brand: #1D0613;
  --accent: #C3AFFF;
  --accent-soft: #29243A;
  --mint: #79D4A1;
  --mint-soft: #182D21;
  --amber: #F0B056;
  --amber-soft: #332511;
  --danger: #FFA096;
  --danger-soft: #3B1F1B;
  --info: #85C4FF;
  --info-soft: #182939;
  --rule: #222F3C;
  --margin-line: #7A325B;
  --ring-metal: #706A6C;
  --ring-metal-hi: #B6B3B4;
  --tape: #5C3349;
  --h0: 348;
  --h1: 18;
  --h2: 48;
  --h3: 78;
  --h4: 108;
  --h5: 138;
  --h6: 168;
  --h7: 198;
  --h8: 228;
  --h9: 258;
  --h10: 288;
  --h11: 318;
  --sec-on: #1A0912;
  --sec-l: 0.6478;
  --sec-c: 0.1103;
  --sec-strong-l: 0.7654;
  --sec-soft-l: 0.2700;
  --sec-soft-c: 0.0287;
  --sec-sat: 46%;
  --sec-lum: 57%;
  --sec-soft-lum: 27%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.360);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.374);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.341);
  --ring: 0 0 0 3px rgba(207, 100, 158, .34);
  --wash: rgba(4, 2, 8, .72);
  color-scheme: dark;
}

:root[data-preset="strawberry"][data-theme="dark"][data-mono] {
  --h0: 348;
  --h1: 348;
  --h2: 348;
  --h3: 348;
  --h4: 348;
  --h5: 348;
  --h6: 348;
  --h7: 348;
  --h8: 348;
  --h9: 348;
  --h10: 348;
  --h11: 348;
}

:root[data-preset="blueberry"] {
  --surface: #FBFDFF;
  --surface-2: #F1F6FF;
  --surface-3: #E5ECF9;
  --bg: #F5F9FF;
  --bg-tint: #EAF1FD;
  --ink: #222B3A;
  --ink-soft: #545D6C;
  --ink-faint: #7C8391;
  --line: #D2E1FD;
  --line-strong: #7F8FAD;
  --brand: #4572C6;
  --brand-strong: #2952A4;
  --brand-soft: #DEEAFF;
  --on-brand: #FFFFFF;
  --accent: #6C51A9;
  --accent-soft: #E8E2FF;
  --mint: #0B784A;
  --mint-soft: #D7F1E0;
  --amber: #895900;
  --amber-soft: #F7E3CA;
  --danger: #AA3832;
  --danger-soft: #FFDDD9;
  --info: #1768A8;
  --info-soft: #D3E9FF;
  --rule: #D6E7F8;
  --margin-line: #88ACEF;
  --ring-metal: #B6B9BE;
  --ring-metal-hi: #F9FAFD;
  --tape: #C3D8FF;
  --h0: 262;
  --h1: 292;
  --h2: 322;
  --h3: 352;
  --h4: 22;
  --h5: 52;
  --h6: 82;
  --h7: 112;
  --h8: 142;
  --h9: 172;
  --h10: 202;
  --h11: 232;
  --sec-on: #FFFFFF;
  --sec-l: 0.5448;
  --sec-c: 0.0928;
  --sec-strong-l: 0.4411;
  --sec-soft-l: 0.9350;
  --sec-soft-c: 0.0241;
  --sec-sat: 39%;
  --sec-lum: 46%;
  --sec-soft-lum: 94%;
  --shadow-sm: 0 1px 2px rgba(19, 39, 78, 0.07), 0 1px 3px rgba(19, 39, 78, 0.050);
  --shadow-md: 0 4px 10px rgba(19, 39, 78, 0.09), 0 2px 4px rgba(19, 39, 78, 0.061);
  --shadow-lg: 0 14px 34px rgba(19, 39, 78, 0.13), 0 4px 10px rgba(19, 39, 78, 0.072);
  --ring: 0 0 0 3px rgba(69, 114, 198, .34);
  --wash: rgba(9, 25, 55, .42);
  color-scheme: light;
}

:root[data-preset="blueberry"][data-mono] {
  --h0: 262;
  --h1: 262;
  --h2: 262;
  --h3: 262;
  --h4: 262;
  --h5: 262;
  --h6: 262;
  --h7: 262;
  --h8: 262;
  --h9: 262;
  --h10: 262;
  --h11: 262;
}

:root[data-preset="blueberry"][data-theme="dark"] {
  --surface: #1E2125;
  --surface-2: #282B32;
  --surface-3: #343944;
  --bg: #0F131A;
  --bg-tint: #151A22;
  --ink: #D8E4F8;
  --ink-soft: #A0AABB;
  --ink-faint: #808795;
  --line: #2B374D;
  --line-strong: #60708C;
  --brand: #5A88DE;
  --brand-strong: #81AEFF;
  --brand-soft: #18253C;
  --on-brand: #060F21;
  --accent: #C3AFFF;
  --accent-soft: #29243A;
  --mint: #79D4A1;
  --mint-soft: #182D21;
  --amber: #F0B056;
  --amber-soft: #332511;
  --danger: #FFA096;
  --danger-soft: #3B1F1B;
  --info: #85C4FF;
  --info-soft: #182939;
  --rule: #222F3C;
  --margin-line: #2F4E89;
  --ring-metal: #696C71;
  --ring-metal-hi: #B3B4B7;
  --tape: #304264;
  --h0: 262;
  --h1: 292;
  --h2: 322;
  --h3: 352;
  --h4: 22;
  --h5: 52;
  --h6: 82;
  --h7: 112;
  --h8: 142;
  --h9: 172;
  --h10: 202;
  --h11: 232;
  --sec-on: #070F1E;
  --sec-l: 0.6462;
  --sec-c: 0.1100;
  --sec-strong-l: 0.7660;
  --sec-soft-l: 0.2700;
  --sec-soft-c: 0.0286;
  --sec-sat: 46%;
  --sec-lum: 57%;
  --sec-soft-lum: 27%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.360);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.374);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.341);
  --ring: 0 0 0 3px rgba(90, 136, 222, .34);
  --wash: rgba(4, 2, 8, .72);
  color-scheme: dark;
}

:root[data-preset="blueberry"][data-theme="dark"][data-mono] {
  --h0: 262;
  --h1: 262;
  --h2: 262;
  --h3: 262;
  --h4: 262;
  --h5: 262;
  --h6: 262;
  --h7: 262;
  --h8: 262;
  --h9: 262;
  --h10: 262;
  --h11: 262;
}

:root[data-preset="meadow"] {
  --surface: #FAFEFA;
  --surface-2: #F0F8F2;
  --surface-3: #E4EFE7;
  --bg: #F2FBF4;
  --bg-tint: #E9F4EC;
  --ink: #212E25;
  --ink-soft: #536056;
  --ink-faint: #7B867E;
  --line: #D1E8D6;
  --line-strong: #7B9481;
  --brand: #31824D;
  --brand-strong: #016330;
  --brand-soft: #D7F2DD;
  --on-brand: #FFFFFF;
  --accent: #6C51A9;
  --accent-soft: #E8E2FF;
  --mint: #0B784A;
  --mint-soft: #D7F1E0;
  --amber: #895900;
  --amber-soft: #F7E3CA;
  --danger: #AA3832;
  --danger-soft: #FFDDD9;
  --info: #1768A8;
  --info-soft: #D3E9FF;
  --rule: #D6E7F8;
  --margin-line: #83BC92;
  --ring-metal: #B5BAB6;
  --ring-metal-hi: #F8FBF9;
  --tape: #BFE2C7;
  --h0: 152;
  --h1: 182;
  --h2: 212;
  --h3: 242;
  --h4: 272;
  --h5: 302;
  --h6: 332;
  --h7: 2;
  --h8: 32;
  --h9: 62;
  --h10: 92;
  --h11: 122;
  --sec-on: #FFFFFF;
  --sec-l: 0.5441;
  --sec-c: 0.0949;
  --sec-strong-l: 0.4394;
  --sec-soft-l: 0.9350;
  --sec-soft-c: 0.0247;
  --sec-sat: 40%;
  --sec-lum: 46%;
  --sec-soft-lum: 94%;
  --shadow-sm: 0 1px 2px rgba(10, 49, 25, 0.07), 0 1px 3px rgba(10, 49, 25, 0.050);
  --shadow-md: 0 4px 10px rgba(10, 49, 25, 0.09), 0 2px 4px rgba(10, 49, 25, 0.061);
  --shadow-lg: 0 14px 34px rgba(10, 49, 25, 0.13), 0 4px 10px rgba(10, 49, 25, 0.072);
  --ring: 0 0 0 3px rgba(49, 130, 77, .34);
  --wash: rgba(4, 33, 14, .42);
  color-scheme: light;
}

:root[data-preset="meadow"][data-mono] {
  --h0: 152;
  --h1: 152;
  --h2: 152;
  --h3: 152;
  --h4: 152;
  --h5: 152;
  --h6: 152;
  --h7: 152;
  --h8: 152;
  --h9: 152;
  --h10: 152;
  --h11: 152;
}

:root[data-preset="meadow"][data-theme="dark"] {
  --surface: #1E211F;
  --surface-2: #272D29;
  --surface-3: #333C35;
  --bg: #0E1510;
  --bg-tint: #141C16;
  --ink: #D8E9DB;
  --ink-soft: #9FAEA2;
  --ink-faint: #7F8B82;
  --line: #293C2E;
  --line-strong: #5C7562;
  --brand: #489962;
  --brand-strong: #6DBE84;
  --brand-soft: #162B1C;
  --on-brand: #041408;
  --accent: #C3AFFF;
  --accent-soft: #29243A;
  --mint: #79D4A1;
  --mint-soft: #182D21;
  --amber: #F0B056;
  --amber-soft: #332511;
  --danger: #FFA096;
  --danger-soft: #3B1F1B;
  --info: #85C4FF;
  --info-soft: #182939;
  --rule: #222F3C;
  --margin-line: #245D37;
  --ring-metal: #696D69;
  --ring-metal-hi: #B2B5B3;
  --tape: #2C4A35;
  --h0: 152;
  --h1: 182;
  --h2: 212;
  --h3: 242;
  --h4: 272;
  --h5: 302;
  --h6: 332;
  --h7: 2;
  --h8: 32;
  --h9: 62;
  --h10: 92;
  --h11: 122;
  --sec-on: #041308;
  --sec-l: 0.6429;
  --sec-c: 0.1121;
  --sec-strong-l: 0.7606;
  --sec-soft-l: 0.2700;
  --sec-soft-c: 0.0291;
  --sec-sat: 47%;
  --sec-lum: 56%;
  --sec-soft-lum: 27%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.360);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.374);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.341);
  --ring: 0 0 0 3px rgba(72, 153, 98, .34);
  --wash: rgba(4, 2, 8, .72);
  color-scheme: dark;
}

:root[data-preset="meadow"][data-theme="dark"][data-mono] {
  --h0: 152;
  --h1: 152;
  --h2: 152;
  --h3: 152;
  --h4: 152;
  --h5: 152;
  --h6: 152;
  --h7: 152;
  --h8: 152;
  --h9: 152;
  --h10: 152;
  --h11: 152;
}

:root[data-preset="sunbeam"] {
  --surface: #FFFCF8;
  --surface-2: #FBF5EC;
  --surface-3: #F3EBDF;
  --bg: #FEF7ED;
  --bg-tint: #F7EFE4;
  --ink: #33291B;
  --ink-soft: #655B4D;
  --ink-faint: #8A8276;
  --line: #EFDEC4;
  --line-strong: #9E8B70;
  --brand: #9A6A00;
  --brand-strong: #734F00;
  --brand-soft: #FAE7C9;
  --on-brand: #FFFFFF;
  --accent: #6C51A9;
  --accent-soft: #E8E2FF;
  --mint: #0B784A;
  --mint-soft: #D7F1E0;
  --amber: #895900;
  --amber-soft: #F7E3CA;
  --danger: #AA3832;
  --danger-soft: #FFDDD9;
  --info: #1768A8;
  --info-soft: #D3E9FF;
  --rule: #D6E7F8;
  --margin-line: #CEA563;
  --ring-metal: #BCB8B3;
  --ring-metal-hi: #FCFAF7;
  --tape: #EDD3AD;
  --h0: 78;
  --h1: 108;
  --h2: 138;
  --h3: 168;
  --h4: 198;
  --h5: 228;
  --h6: 258;
  --h7: 288;
  --h8: 318;
  --h9: 348;
  --h10: 18;
  --h11: 48;
  --sec-on: #FFFFFF;
  --sec-l: 0.5432;
  --sec-c: 0.0925;
  --sec-strong-l: 0.4417;
  --sec-soft-l: 0.9350;
  --sec-soft-c: 0.0240;
  --sec-sat: 39%;
  --sec-lum: 46%;
  --sec-soft-lum: 94%;
  --shadow-sm: 0 1px 2px rgba(57, 36, 0, 0.07), 0 1px 3px rgba(57, 36, 0, 0.050);
  --shadow-md: 0 4px 10px rgba(57, 36, 0, 0.09), 0 2px 4px rgba(57, 36, 0, 0.061);
  --shadow-lg: 0 14px 34px rgba(57, 36, 0, 0.13), 0 4px 10px rgba(57, 36, 0, 0.072);
  --ring: 0 0 0 3px rgba(154, 106, 0, .34);
  --wash: rgba(38, 23, 0, .42);
  color-scheme: light;
}

:root[data-preset="sunbeam"][data-mono] {
  --h0: 78;
  --h1: 78;
  --h2: 78;
  --h3: 78;
  --h4: 78;
  --h5: 78;
  --h6: 78;
  --h7: 78;
  --h8: 78;
  --h9: 78;
  --h10: 78;
  --h11: 78;
}

:root[data-preset="sunbeam"][data-theme="dark"] {
  --surface: #22201C;
  --surface-2: #2F2B24;
  --surface-3: #3F382F;
  --bg: #17120B;
  --bg-tint: #1E1911;
  --ink: #EEE2CF;
  --ink-soft: #B2A897;
  --ink-faint: #8E8679;
  --line: #42341F;
  --line-strong: #7D6C50;
  --brand: #B57E08;
  --brand-strong: #DBA341;
  --brand-soft: #312209;
  --on-brand: #180D00;
  --accent: #C3AFFF;
  --accent-soft: #29243A;
  --mint: #79D4A1;
  --mint-soft: #182D21;
  --amber: #F0B056;
  --amber-soft: #332511;
  --danger: #FFA096;
  --danger-soft: #3B1F1B;
  --info: #85C4FF;
  --info-soft: #182939;
  --rule: #222F3C;
  --margin-line: #6A4800;
  --ring-metal: #6E6B67;
  --ring-metal-hi: #B6B4B1;
  --tape: #533E1B;
  --h0: 78;
  --h1: 108;
  --h2: 138;
  --h3: 168;
  --h4: 198;
  --h5: 228;
  --h6: 258;
  --h7: 288;
  --h8: 318;
  --h9: 348;
  --h10: 18;
  --h11: 48;
  --sec-on: #170D01;
  --sec-l: 0.6450;
  --sec-c: 0.1098;
  --sec-strong-l: 0.7630;
  --sec-soft-l: 0.2700;
  --sec-soft-c: 0.0285;
  --sec-sat: 46%;
  --sec-lum: 56%;
  --sec-soft-lum: 27%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.360);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.374);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.341);
  --ring: 0 0 0 3px rgba(181, 126, 8, .34);
  --wash: rgba(4, 2, 8, .72);
  color-scheme: dark;
}

:root[data-preset="sunbeam"][data-theme="dark"][data-mono] {
  --h0: 78;
  --h1: 78;
  --h2: 78;
  --h3: 78;
  --h4: 78;
  --h5: 78;
  --h6: 78;
  --h7: 78;
  --h8: 78;
  --h9: 78;
  --h10: 78;
  --h11: 78;
}

:root[data-preset="lagoon"] {
  --surface: #F9FEFF;
  --surface-2: #ECF8FB;
  --surface-3: #DFEFF3;
  --bg: #EDFCFF;
  --bg-tint: #E4F4F7;
  --ink: #192E33;
  --ink-soft: #4C6065;
  --ink-faint: #75868A;
  --line: #C4E8F0;
  --line-strong: #6D959E;
  --brand: #007F92;
  --brand-strong: #005F6E;
  --brand-soft: #C9F2FB;
  --on-brand: #FFFFFF;
  --accent: #6C51A9;
  --accent-soft: #E8E2FF;
  --mint: #0B784A;
  --mint-soft: #D7F1E0;
  --amber: #895900;
  --amber-soft: #F7E3CA;
  --danger: #AA3832;
  --danger-soft: #FFDDD9;
  --info: #1768A8;
  --info-soft: #D3E9FF;
  --rule: #D6E7F8;
  --margin-line: #58BDD0;
  --ring-metal: #B3BABC;
  --ring-metal-hi: #F7FBFC;
  --tape: #ABE2EE;
  --h0: 212;
  --h1: 242;
  --h2: 272;
  --h3: 302;
  --h4: 332;
  --h5: 2;
  --h6: 32;
  --h7: 62;
  --h8: 92;
  --h9: 122;
  --h10: 152;
  --h11: 182;
  --sec-on: #FFFFFF;
  --sec-l: 0.5438;
  --sec-c: 0.0948;
  --sec-strong-l: 0.4422;
  --sec-soft-l: 0.9350;
  --sec-soft-c: 0.0247;
  --sec-sat: 40%;
  --sec-lum: 46%;
  --sec-soft-lum: 94%;
  --shadow-sm: 0 1px 2px rgba(0, 47, 55, 0.07), 0 1px 3px rgba(0, 47, 55, 0.050);
  --shadow-md: 0 4px 10px rgba(0, 47, 55, 0.09), 0 2px 4px rgba(0, 47, 55, 0.061);
  --shadow-lg: 0 14px 34px rgba(0, 47, 55, 0.13), 0 4px 10px rgba(0, 47, 55, 0.072);
  --ring: 0 0 0 3px rgba(0, 127, 146, .34);
  --wash: rgba(0, 31, 37, .42);
  color-scheme: light;
}

:root[data-preset="lagoon"][data-mono] {
  --h0: 212;
  --h1: 212;
  --h2: 212;
  --h3: 212;
  --h4: 212;
  --h5: 212;
  --h6: 212;
  --h7: 212;
  --h8: 212;
  --h9: 212;
  --h10: 212;
  --h11: 212;
}

:root[data-preset="lagoon"][data-theme="dark"] {
  --surface: #1C2123;
  --surface-2: #242D2F;
  --surface-3: #2F3C3F;
  --bg: #0A1517;
  --bg-tint: #101C1E;
  --ink: #CFE9EF;
  --ink-soft: #97AEB2;
  --ink-faint: #798B8E;
  --line: #1C3C42;
  --line-strong: #4D757D;
  --brand: #0096AA;
  --brand-strong: #00BED8;
  --brand-soft: #022B32;
  --on-brand: #001317;
  --accent: #C3AFFF;
  --accent-soft: #29243A;
  --mint: #79D4A1;
  --mint-soft: #182D21;
  --amber: #F0B056;
  --amber-soft: #332511;
  --danger: #FFA096;
  --danger-soft: #3B1F1B;
  --info: #85C4FF;
  --info-soft: #182939;
  --rule: #222F3C;
  --margin-line: #005A68;
  --ring-metal: #676D6E;
  --ring-metal-hi: #B1B5B6;
  --tape: #124A54;
  --h0: 212;
  --h1: 242;
  --h2: 272;
  --h3: 302;
  --h4: 332;
  --h5: 2;
  --h6: 32;
  --h7: 62;
  --h8: 92;
  --h9: 122;
  --h10: 152;
  --h11: 182;
  --sec-on: #001317;
  --sec-l: 0.6441;
  --sec-c: 0.1123;
  --sec-strong-l: 0.7632;
  --sec-soft-l: 0.2700;
  --sec-soft-c: 0.0292;
  --sec-sat: 47%;
  --sec-lum: 56%;
  --sec-soft-lum: 27%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.360);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.374);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.341);
  --ring: 0 0 0 3px rgba(0, 150, 170, .34);
  --wash: rgba(4, 2, 8, .72);
  color-scheme: dark;
}

:root[data-preset="lagoon"][data-theme="dark"][data-mono] {
  --h0: 212;
  --h1: 212;
  --h2: 212;
  --h3: 212;
  --h4: 212;
  --h5: 212;
  --h6: 212;
  --h7: 212;
  --h8: 212;
  --h9: 212;
  --h10: 212;
  --h11: 212;
}

:root[data-preset="cocoa"] {
  --surface: #FFFCFB;
  --surface-2: #FCF4F2;
  --surface-3: #F4E9E7;
  --bg: #FFF6F4;
  --bg-tint: #F8EEEC;
  --ink: #342725;
  --ink-soft: #675957;
  --ink-faint: #8C807E;
  --line: #F2DBD6;
  --line-strong: #A18983;
  --brand: #A46254;
  --brand-strong: #834438;
  --brand-soft: #FDE3DD;
  --on-brand: #FFFFFF;
  --accent: #6C51A9;
  --accent-soft: #E8E2FF;
  --mint: #0B784A;
  --mint-soft: #D7F1E0;
  --amber: #895900;
  --amber-soft: #F7E3CA;
  --danger: #AA3832;
  --danger-soft: #FFDDD9;
  --info: #1768A8;
  --info-soft: #D3E9FF;
  --rule: #D6E7F8;
  --margin-line: #D49D92;
  --ring-metal: #BEB7B6;
  --ring-metal-hi: #FDF9F8;
  --tape: #F1CEC7;
  --h0: 32;
  --h1: 62;
  --h2: 92;
  --h3: 122;
  --h4: 152;
  --h5: 182;
  --h6: 212;
  --h7: 242;
  --h8: 272;
  --h9: 302;
  --h10: 332;
  --h11: 2;
  --sec-on: #FFFFFF;
  --sec-l: 0.5463;
  --sec-c: 0.0900;
  --sec-strong-l: 0.4435;
  --sec-soft-l: 0.9350;
  --sec-soft-c: 0.0234;
  --sec-sat: 38%;
  --sec-lum: 47%;
  --sec-soft-lum: 94%;
  --shadow-sm: 0 1px 2px rgba(62, 31, 25, 0.07), 0 1px 3px rgba(62, 31, 25, 0.050);
  --shadow-md: 0 4px 10px rgba(62, 31, 25, 0.09), 0 2px 4px rgba(62, 31, 25, 0.061);
  --shadow-lg: 0 14px 34px rgba(62, 31, 25, 0.13), 0 4px 10px rgba(62, 31, 25, 0.072);
  --ring: 0 0 0 3px rgba(164, 98, 84, .34);
  --wash: rgba(43, 19, 14, .42);
  color-scheme: light;
}

:root[data-preset="cocoa"][data-mono] {
  --h0: 32;
  --h1: 32;
  --h2: 32;
  --h3: 32;
  --h4: 32;
  --h5: 32;
  --h6: 32;
  --h7: 32;
  --h8: 32;
  --h9: 32;
  --h10: 32;
  --h11: 32;
}

:root[data-preset="cocoa"][data-theme="dark"] {
  --surface: #23201F;
  --surface-2: #302A29;
  --surface-3: #403735;
  --bg: #171110;
  --bg-tint: #1F1816;
  --ink: #F1E0DC;
  --ink-soft: #B4A6A2;
  --ink-faint: #908582;
  --line: #44322E;
  --line-strong: #816A64;
  --brand: #BC7769;
  --brand-strong: #E49B8C;
  --brand-soft: #33201C;
  --on-brand: #1A0B08;
  --accent: #C3AFFF;
  --accent-soft: #29243A;
  --mint: #79D4A1;
  --mint-soft: #182D21;
  --amber: #F0B056;
  --amber-soft: #332511;
  --danger: #FFA096;
  --danger-soft: #3B1F1B;
  --info: #85C4FF;
  --info-soft: #182939;
  --rule: #222F3C;
  --margin-line: #704138;
  --ring-metal: #706A69;
  --ring-metal-hi: #B7B3B2;
  --tape: #563A35;
  --h0: 32;
  --h1: 62;
  --h2: 92;
  --h3: 122;
  --h4: 152;
  --h5: 182;
  --h6: 212;
  --h7: 242;
  --h8: 272;
  --h9: 302;
  --h10: 332;
  --h11: 2;
  --sec-on: #1A0B08;
  --sec-l: 0.6396;
  --sec-c: 0.0900;
  --sec-strong-l: 0.7581;
  --sec-soft-l: 0.2700;
  --sec-soft-c: 0.0234;
  --sec-sat: 38%;
  --sec-lum: 56%;
  --sec-soft-lum: 27%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.360);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.374);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62), 0 4px 10px rgba(0, 0, 0, 0.341);
  --ring: 0 0 0 3px rgba(188, 119, 105, .34);
  --wash: rgba(4, 2, 8, .72);
  color-scheme: dark;
}

:root[data-preset="cocoa"][data-theme="dark"][data-mono] {
  --h0: 32;
  --h1: 32;
  --h2: 32;
  --h3: 32;
  --h4: 32;
  --h5: 32;
  --h6: 32;
  --h7: 32;
  --h8: 32;
  --h9: 32;
  --h10: 32;
  --h11: 32;
}