/*
 * THE DESIGN TOKENS — every styling decision for the whole mockup lives HERE.
 * ─────────────────────────────────────────────────────────────────────────────
 * This is the one file to edit when you want the mockup to look different.
 * Every color, font, size, corner, shadow and speed used anywhere — the public
 * site AND the owner hub — is a variable defined below. No other file invents
 * a value; they only use these names.
 *
 * The palette is the canonical Redstone one (shared-tokens.css from the
 * design-reference pack, values carried verbatim): basalt black and antler
 * bone with ONE burnt-signal accent, used with restraint — action and
 * emphasis, never decoration. Think stamped steel and letterpress.
 *
 * TWO THEMES live here. The light theme is the default, defined first; the
 * DARK theme is the block near the bottom marked "THE DARK THEME" — it only
 * re-states the colors, and every page follows whichever the ☾/☀ toggle (or
 * the visitor's system setting) picks. Depth on dark comes from raised
 * surfaces being LIGHTER than the page — page, then card, then quiet fill,
 * each a clear step up — never from shadows.
 */

:root {

  /* ── THE ACCENT — the one color that means "act here" ─────────────────────
     HOUSE VIOLET (the current app's own accent, owner's call 2026-09-01;
     the deep step is the app's press color, the dark theme runs the app's
     exact #a78bfa). Prefer the Redstone copper instead? Swap these lines:
       --accent:      #b3541e;   --accent-deep: #8a3d13;
       --accent-line: #e6c8a8;   --accent-wash: #f7ead9;
       --on-accent:   #fbfaf8;   --gold:        #c9b689;
     …and in THE DARK THEME block below:
       --accent:      #c9682c;   --accent-deep: #e08b4d;
       --accent-line: #5c4530;   --accent-wash: #332315;
       --on-accent:   #1a1916;   --gold:        #d9bc84;
  */
  --accent:      #8b5cf6;  /* house violet — primary action, links, active   */
  --accent-deep: #6d3fd4;  /* hover / pressed, inline link text              */
  --accent-line: #d9cdf7;  /* a violet hairline — borders that hint at action*/
  --accent-wash: #efe9fd;  /* the palest violet — selected rows, soft chips  */
  --on-accent:   #ffffff;  /* text sitting ON an accent-filled button        */

  /* ── PAPER & INK — the light world: genuinely WHITE pages, dark ink
       (owner's call, round four — day, unmistakably, next to dark's night) ── */
  --bg:        #fdfdfc;    /* the page — true paper white                    */
  --surface:   #ffffff;    /* cards, panels, rows                            */
  --sand:      #f4f2ee;    /* the quiet fill — barely-there warm gray       */
  --sand-deep: #e9e6e0;    /* deeper fill — table headers, scrollbars        */
  --ink:       #1a1916;    /* basalt black — headings, strong text           */
  --ink-soft:  #403e38;    /* body copy                                      */
  --muted:     #7d786c;    /* labels, captions, secondary text               */
  --line:      #e6e3dc;    /* the hairline that rules everything             */

  /* ── THE DARK BAND — basalt ─────────────────────────────────────────────── */
  --plum:           #191813; /* the dark band (hero, footer, CTA strip)      */
  --plum-deep:      #16150f; /* the darkest ground, behind hero media        */
  --plum-wash:      #e8e6dd; /* basalt's faint echo on paper                 */
  --on-dark:        #f2f1ee; /* body type on a dark band                     */
  --on-dark-strong: #fbfaf8; /* headlines on a dark band                     */

  /* ── THE BIG BANDS — hero, Constellation, CTA strip, footer ──────────────
     In LIGHT mode these are light (owner's call, round five: the light home
     is all-of-a-piece); in dark mode they are the deepest night. Blocks use
     these four names and follow the theme automatically. */
  --band-bg:          #f5f3f9; /* the band's ground — a whisper of violet    */
  --band-deep:        #edeaf4; /* the deepest band ground (hero, night sky)  */
  --on-band:          #1a1916; /* body type on a band                        */
  --on-band-strong:   #100f0d; /* headlines on a band                        */
  --band-accent:      #6d3fd4; /* the accent's voice on a band               */

  /* The brand mark's chip — the rounded square the U sits in. */
  --mark-bg: #191813;
  --mark-fg: #f2f1ee;

  /* Form controls and scrollbars follow the theme. */
  color-scheme: light;

  /* ── QUIET COLORS — the soft accents, used sparingly ────────────────────── */
  --sage:      #a09b8e;    /* stone — calm secondary, quiet chips            */
  --sage-wash: #efede6;
  --blush:     #eae6da;    /* soft bone tint for gentle washes               */
  --lip:       #4f463a;    /* leather — tiny accents only, never fields      */
  --gold:      #cfc0f5;    /* the accent's soft voice on dark bands          */

  /* ── STATES — things going right, needing a look, going wrong ───────────── */
  --good: #4e7a52;  --good-wash: #e9f1ea;
  --warn: #ad7c2e;  --warn-wash: #f7eedd;
  --bad:  #9e4436;  --bad-wash:  #f5e9e5;

  /* ── CORNERS & SHADOWS — squarer than sticker-round: stamped ────────────── */
  --radius:      10px;     /* cards, plates                                  */
  --radius-sm:   6px;      /* buttons, inputs                                */
  --radius-lg:   14px;     /* the biggest surfaces                           */
  --radius-pill: 999px;    /* chips and badges                               */
  --shadow-sm: 0 1px 2px rgba(26,25,22,.06), 0 1px 3px rgba(26,25,22,.04);
  --shadow-md: 0 4px 12px rgba(26,25,22,.07), 0 2px 4px rgba(26,25,22,.04);
  --shadow-lg: 0 18px 48px rgba(26,25,22,.10), 0 4px 12px rgba(26,25,22,.05);

  /* ── TYPE FAMILIES — condensed industrial display, humanist sans body.
       All system fonts: Bahnschrift on Windows, Avenir Next Condensed on
       Apple, graceful fall-through elsewhere. Nothing loads from the web.  */
  --font-display: 'Bahnschrift', 'Avenir Next Condensed', 'Roboto Condensed',
    'Arial Narrow', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* ── THE SITE'S TYPE SCALE — fluid, so nothing screams on a phone ───────── */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(1rem, 0.98rem + 0.12vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --t-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-xl:   clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --t-2xl:  clamp(1.75rem, 1.48rem + 1.2vw, 2.5rem);
  --t-3xl:  clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);
  --t-4xl:  clamp(2.75rem, 1.9rem + 3.6vw, 5rem);

  /* ── SPACING — 4px base, shared by both halves ──────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* ── PAGE RHYTHM (the site) ─────────────────────────────────────────────── */
  --gutter:  clamp(1.25rem, 4vw, 3rem);  /* side padding on every page        */
  --measure: 68ch;                        /* the longest comfortable text line */
  --band:    clamp(4.5rem, 9vw, 10rem);   /* vertical breathing of a section   */
  --wrap:    1200px;                      /* content never grows wider         */

  /* ── MOTION & FOCUS ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* subtle and fast, ease-out    */
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 250ms;
  --focus-ring:   2px solid var(--accent);
  --focus-offset: 2px;

  /* Paper grain laid over the drawn image plates. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── THE HUB'S OVERRIDES — dense admin screens want fixed, predictable type ─
   Any page whose <body> carries class "hub" reads these instead.            */
body.hub {
  --t-xs:   11.5px;
  --t-sm:   13px;
  --t-base: 14.5px;
  --t-md:   16px;
  --t-lg:   19px;
  --t-xl:   24px;
  --t-2xl:  31px;
  --t-3xl:  40px;

  --sidebar-w: 254px;      /* the hub's left rail                            */
  --topbar-h:  66px;       /* the hub's top bar                              */

  /* Stacking order — one place, so nothing fights. */
  --z-sticky:  20;
  --z-sidebar: 30;
  --z-modal:   70;
}

/* ══ THE DARK THEME ═══════════════════════════════════════════════════════
   Applied when the ☾ toggle (or the visitor's system setting) puts
   data-theme="dark" on the page. Only colors change — every size, speed and
   font above still applies. The depth rule: the page is darkest, cards are a
   clear step LIGHTER, quiet fills a step lighter again. Shadows barely exist
   on dark; lightness does their job.

   Prefer the house violet here too? Swap the same six accent lines the way
   the note at the top of this file shows — the dark theme has its own copies
   because dark needs brighter ink to stay readable. */
html[data-theme='dark'] {
  /* The accent — the app's own violet, verbatim (#a78bfa; its ink-on-accent
     pair #0b0a10 measures 7.2:1 in the app's tokens). */
  --accent:      #a78bfa;
  --accent-deep: #bda6fd;  /* on dark, "deep" is the BRIGHTER voice — link text */
  --accent-line: #574a7d;
  --accent-wash: #2b2540;
  --on-accent:   #0b0a10;  /* dark ink on the violet button — the app's pair */

  /* Paper & ink, inverted into the deep-purple night (owner's call, round
     four): every dark surface carries the violet's hue, so dark mode reads
     as ITS OWN world next to the white day. Ladder unchanged: page darkest,
     cards a clear step lighter, quiet fills lighter again. */
  --bg:        #121018;    /* the page — deep violet-black                   */
  --surface:   #1c1826;    /* cards — a clear step LIGHTER than the page     */
  --sand:      #262033;    /* quiet fills — lighter again                    */
  --sand-deep: #322b42;
  --ink:       #f1eff6;
  --ink-soft:  #c7c2d4;
  --muted:     #8d8699;
  --line:      #363046;    /* hairlines must stay visible on dark            */

  /* The dark band goes DEEPER than the page, so bands still read as bands. */
  --plum:      #0d0b13;
  --plum-deep: #09080f;
  --plum-wash: #241f31;
  --on-dark:        #f1eff6;
  --on-dark-strong: #fbfaff;

  /* The big bands keep the night in dark mode. */
  --band-bg:        #0d0b13;
  --band-deep:      #09080f;
  --on-band:        #f1eff6;
  --on-band-strong: #fbfaff;
  --band-accent:    #cfc0f5;

  /* Quiet colors, lifted to read on the night. */
  --sage:      #a49dba;
  --sage-wash: #241f31;
  --blush:     #282234;
  --lip:       #b1a7c9;
  --gold:      #cfc0f5;

  /* States, lifted the same way. */
  --good: #82b389;  --good-wash: #1b281f;
  --warn: #d3a355;  --warn-wash: #2d2415;
  --bad:  #cc6f5e;  --bad-wash:  #2f1b18;

  /* Shadows almost vanish — lightness carries the depth. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.5);

  /* The brand mark flips to bone-on-dark's opposite so it never disappears. */
  --mark-bg: #f1eff6;
  --mark-fg: #16121f;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}