/* DLC design tokens: type scale, brand faces, and the shared V2 color/space/motion
   palette. Imported by layout.css; careers.css and promotion.css fold in at Phase 5. */

/* Brand faces. All six .woff2 files sit in css/fonts/; no Google Fonts dependency. */

/* Bebas Neue: --font-hero, every display use except the page banner H1. Single weight by design. */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/BebasNeue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Anton: the page banner H1 only (DLCWEB-707). Single weight */
@font-face {
  font-family: Anton;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Oswald: every other heading, plus nav, buttons, labels, table headers. */
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("fonts/Oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mulish: body, forms, and all long-form and legal copy. Variable, 200-1000. */
@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/Mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/Mulish-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Mulish;
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/Mulish-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Mulish;
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/Mulish-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Not declared here, deliberately:
   - WinkySans-Italic.woff2 sits in fonts/ but is not a brand face. Leave it
     unreferenced; delete it once you confirm nothing loads it.
   - Caveat (--font-script in the design system) ships in fonts/ and is declared
     in careers.css, but isn't a public-site face yet. */


:root {
  /* -------------------------------------------------------------------------
     2. TYPE
     Three families, one job each. Never a fourth.
     ---------------------------------------------------------------------- */
  --font-hero:    "Bebas Neue", impact, "Arial Narrow", sans-serif;
  --font-banner:  "Anton", impact, "Arial Narrow", sans-serif;
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Mulish", helvetica, system-ui, sans-serif;
  --text-base:     16px;
  --leading-base:  1.6;
  --leading-tight: 1.05;
  --size-hero:    clamp(3.8rem, 9vw, 6.8rem);
  --size-display: clamp(2rem, 4vw, 3.6rem);      /* the support band phone number */
  --size-h2:      clamp(1.7rem, 4vw, 2.6rem);
  /* Two steps the handoff skipped: --size-h2 fell straight to --size-lead, so every panel
     and card head in layout.css sat within a few pixels of its own body copy */
  --size-panel:   clamp(1.5rem, 2.2vw, 2rem);    /* modal, panel and calculator heads */
  --size-card:    clamp(1.25rem, 1.7vw, 1.5rem); /* card, list and sidebar heads */
  --size-lead:    1.25rem;
  --size-h3:      1.15rem;
  --size-h4:      1rem;
  --size-body:    1rem;
  --size-body-lg: 1.125rem;
  --size-small:   0.85rem;   /* buttons, tabs, tags, hints */
  --size-legal:   0.75rem;   /* field labels, table headers */
  --size-micro:   0.6875rem; /* badges and eyebrows only */
  --weight-display:        600;
  --weight-display-strong: 700;
  --weight-body-light:     300;
  --weight-body:           400;
  --weight-body-strong:    700;
  --track-display:     0.02em;
  --track-eyebrow:     0.14em;  /* matches the DS bundle 1:1 */
  --track-hero:        0.01em;
  --track-nav:         0.04em;
  --track-button:      0.05em;
  --track-eyebrow-sm:  0.06em;

  /* Casing comes from the copy, not from CSS. 22 rules read these rather than a literal, so
     the decision lives here. All three are none deliberately: the real ask is a mix of title
     and sentence case, which text-transform cannot express -- it can only shout at everything
     or nothing. That also makes the casing real for screen readers and search rather than
     painted on, which is what the SEO note in the plan was asking for anyway.
     Consequence to own: any string authored lowercase BECAUSE css uppercased it now renders
     lowercase. Those are content fixes, not CSS ones. */
  --case-display: none;
  --case-body:    none;
  --case-nav:     none;

  /* -------------------------------------------------------------------------
     3. COLOR. Core brand. Fixed; never flips with OS mode.
     ---------------------------------------------------------------------- */
  --anchor:       #0c0e13;  /* replaces #1c3f69 and most #15477c blocks */
  --anchor-soft:  #08090c;  /* footer, deepest stop */
  --accent:       #fff200;  /* lemon. THE accent. replaces every #ff0 */
  --accent-hover: #e6da00;
  --ink:          #0c0e13;  /* the handoff named this color token with a name that's
                               reused as a FONT FAMILY in careers.css and
                               luxury-storage.css, so that name is dropped here. */

  /* Lemon is a FILL, not a text color. It sits on the anchor, or carries
     anchor text. It is never light text on white (1.17:1) and never fills a
     light area behind light text. */

  /* Cool accent, surface-locked. Each fails on the other's surface. */
  --blue:       #0077b6;  /* light surfaces only. links, focus, info states */
  --blue-light: #00a3e0;  /* the anchor only */
  --blue-hover: #005e91;

  /* Blue is functional, never the primary CTA. That rule is what retires
     #15477c: the old system used one blue for headings, links, buttons,
     borders, backgrounds and focus rings simultaneously. */

  /* Light surface set */
  --surface:         #f8f8f8;  /* page default. not pure white */
  --surface-alt:     #ebeef1;  /* FAQ question strips, blog zebra */
  --surface-sunken:  #eceff2;  /* instant-funding callout */
  --surface-raised:  #fff;
  --body:            #222;  /* 15.9 AAA */
  --muted:           #595959;  /* 6.60 AA. the floor, never lighter for text */
  --border:          #e2e2e2;
  --border-hairline: rgb(12 14 19 / 12%);  /* also replaces layout.css's
                               border/background: rgba(21,71,124,.15) */

  /* Banned for text, no exceptions: #999, #aab3bc, #7a8696, and the pale gray
     currently carrying the apply-page licensing block. */

  /* On-anchor set */
  --white:         #fff;
  --on-dark:       #fff;  /* 19.30 AAA */
  --on-dark-body:  #e6e8ec;  /* 15.74 AAA */
  --on-dark-muted: #9aa4b0;  /* 7.64 AAA */
  --on-dark-panel: #16191f;
  --on-dark-line:  #23262d;

  /* Semantic. Never meaning by color alone. */
  --success:       #009f23;
  --error:         #e60b0b;
  --warning:       #dcb715;
  --warning-ink:   #8a7100;  /* raw --warning fails as text on light */
  --error-ink:     #c40a0a;  /* 6.19:1 on white, 5.82:1 on --surface. raw --error is 4.48:1
                                on --surface, which the apply form now sits on. Same pairing
                                idea as --warning-ink: the hue for fills, this one for text. */
  --error-on-dark: #ffb4b4;

  /* Focus. Always visible; never removed, never a color change alone. */
  --focus-ring:         var(--blue);
  --focus-ring-on-dark: var(--accent);
  --focus-width:  3px;
  --focus-offset: 2px;

  /* Resolved here, not at the button: mav2 dark redefines --ink as white */
  --button-ink: var(--ink);

  /* Primary button. Ink on light, the dark surfaces in layout.css flip it to lemon */
  --primary-fill: var(--button-ink);
  --primary-label: var(--accent);
  --primary-fill-hover: var(--accent);

  /* Scrim over photography */
  --scrim: linear-gradient(90deg, rgb(12 14 19 / 88%) 0%, rgb(12 14 19 / 55%) 60%, rgb(12 14 19 / 15%) 100%);
  --modal-scrim: rgb(0 21 67 / 90%);
  --overlay: rgb(12 14 19 / 80%);  /* replaces layout.css's .cta-row-content-container
                               image scrim, background: #15477ccc */

  /* -------------------------------------------------------------------------
     4. SPACE, SHAPE, MOTION
     ---------------------------------------------------------------------- */
  --container: 1440px;
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* Full-width bars only: the padding that lines a bar's content up with a capped --container box */
  --container-edge: max(0px, calc((100% - var(--container)) / 2));
  --container-inset: calc(var(--container-edge) + var(--gutter));
  --section-y: clamp(3rem, 1.5rem + 4vw, 5.5rem);
  --measure:   75ch;  /* comfortable line length for running prose, 55-75ch */
  --measure-wide: 90ch;  /* the same prose on a page with no sidebar (DLCWEB-753) */

  /* --header-h is deliberately NOT declared here. It means two different things by
     context: a static 72px floor on the careers/luxury-storage microsites (their own
     sheets set it, careers.css:155 / luxury-storage.css:29), and a live JS-measured
     height on the main site (header.php), where layout.css/promotion.css read it via
     var(--header-h, <per-consumer literal>) with NO :root definition anywhere in scope.
     A shared :root value can't serve both, and it's actively harmful here: CSS custom
     property fallback only applies when the property is undefined EVERYWHERE, not
     "unless a more relevant rule already set it" -- so a :root default of 72px would
     silently win over every one of those per-consumer literals (190/203/220px) whenever
     header.php's measuring script hasn't run yet (or JS is off), turning a safe gap into
     a real overlap under a 166-205px header. Do not add this back. */
  --radius:      4px;    /* one value, everywhere */
  --radius-pill: 999px;  /* chips and the amount-slider thumb only */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --hairline:            0.5px;
  --border-width:        1px;
  --border-width-strong: 2px;
  --shadow-raised:  0 1px 2px rgb(12 14 19 / 6%);
  --shadow-overlay: 0 12px 32px rgb(12 14 19 / 24%);
  --shadow-hairline: 0 0 1px rgb(12 14 19 / 45%);  /* replaces box-shadow: 0 0 1px
                               #14477c (.ma-button, .ma-button-small) */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --ease:        var(--ease-out);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}


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