/*
 * 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" ─────────────────────
     Want the house violet instead of copper? Swap these six lines and the
     whole mockup follows:
       --accent:      #6d4ae0;
       --accent-deep: #5335b8;
       --accent-line: #cfc4f2;
       --accent-wash: #efebfb;
       --gold:        #b9a7f0;   (the accent's voice on dark bands)
       --warn:        #ad7c2e;   (unchanged — keep states honest)
  */
  --accent:      #b3541e;  /* burnt signal — primary action, links, active   */
  --accent-deep: #8a3d13;  /* hover / pressed, inline link text              */
  --accent-line: #e6c8a8;  /* a copper hairline — borders that hint at action*/
  --accent-wash: #f7ead9;  /* the palest copper — selected rows, soft chips  */
  --on-accent:   #fbfaf8;  /* text sitting ON an accent-filled button        */

  /* ── PAPER & INK — the light world ──────────────────────────────────────── */
  --bg:        #f2efe6;    /* antler bone — the page itself                  */
  --surface:   #ffffff;    /* cards, panels, rows                            */
  --sand:      #e9e5d6;    /* bone wash — quiet fills, hovers                */
  --sand-deep: #dfdac9;    /* deeper bone — table headers, scrollbars        */
  --ink:       #1a1916;    /* basalt black — headings, strong text           */
  --ink-soft:  #403e38;    /* body copy                                      */
  --muted:     #7d786c;    /* labels, captions, secondary text               */
  --line:      #ddd8c9;    /* 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 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:      #c9b689;    /* antler — the accent's 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 — brighter than the light theme's, so it reads on basalt. */
  --accent:      #c9682c;
  --accent-deep: #e08b4d;  /* on dark, "deep" is the BRIGHTER voice — link text */
  --accent-line: #5c4530;
  --accent-wash: #332315;
  --on-accent:   #1a1916;  /* dark text on the brighter copper button        */

  /* Paper & ink, inverted: basalt page, bone ink. */
  --bg:        #131210;    /* the page — deep warm basalt                    */
  --surface:   #1f1d19;    /* cards — a clear step LIGHTER than the page     */
  --sand:      #292620;    /* quiet fills — lighter again                    */
  --sand-deep: #363228;
  --ink:       #f2f1ee;
  --ink-soft:  #c9c4b9;
  --muted:     #8f887a;
  --line:      #37332a;    /* hairlines must stay visible on dark            */

  /* The dark band goes DEEPER than the page, so bands still read as bands. */
  --plum:      #0e0d0b;
  --plum-deep: #0a0908;
  --plum-wash: #26241f;
  --on-dark:        #f2f1ee;
  --on-dark-strong: #fbfaf8;

  /* Quiet colors, lifted to read on basalt. */
  --sage:      #a8a294;
  --sage-wash: #26241f;
  --blush:     #2a2721;
  --lip:       #b3a58e;
  --gold:      #d9bc84;

  /* States, lifted the same way. */
  --good: #7fae85;  --good-wash: #1c2a1e;
  --warn: #d0a04f;  --warn-wash: #2e2614;
  --bad:  #c86a5a;  --bad-wash:  #301c17;

  /* 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: #f2f1ee;
  --mark-fg: #191813;

  color-scheme: dark;
}

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