/* ==========================================================================
   DALELAD - Design Tokens
   Palette derived from the official logo: brushed silver on near-black,
   with a single antique-gold accent for calls to action.
   Change values here and the whole site follows.
   ========================================================================== */

:root {
  /* Tell the browser this is a dark UI. Without it, native controls - the date
     picker glyph, the picker panel itself, select dropdowns, scrollbars - get
     drawn for a light page, which is why the calendar icon was a dark grey
     smudge on a dark field. */
  color-scheme: dark;

  /* ---- Ground ----------------------------------------------------------- */
 --c-ink:        #050504; /* page background - matches the logo's ground */
 --c-ink-2:      #0A0B0C; /* raised surface / alternating section        */
 --c-card:       #101214; /* card background                             */

  /* ---- Brushed silver scale (the logo's metal) -------------------------- */
 --c-steel-100:  #E8EAED; /* highlight - brightest edge of the metal     */
 --c-steel-200:  #C7CBD1; /* light silver                                */
 --c-steel-300:  #9DA3AB; /* the logo's mid grey - body text on dark     */
 --c-steel-400:  #6E747C; /* shadow silver - secondary text              */
 --c-steel-500:  #3D4249; /* deep steel - borders, muted fills           */

  /* ---- Accent: antique gold --------------------------------------------- */
 --c-gold:       #D4A24C; /* primary CTA, rules, highlights              */
 --c-gold-lt:    #EDC784; /* hover / gradient top                        */
 --c-gold-dk:    #9E7529; /* pressed / gradient bottom                   */

  /* ---- Semantic --------------------------------------------------------- */
 --bg:            var(--c-ink);
 --bg-alt:        var(--c-ink-2);
 --surface:       var(--c-card);
 --text:          var(--c-steel-300);
 --text-strong:   var(--c-steel-100);
 --text-muted:    var(--c-steel-400);
 --border:        rgba(232, 234, 237, 0.10);
 --border-strong: rgba(232, 234, 237, 0.24);
 --overlay:       rgba(5, 5, 4, 0.72);

  /* Brushed-metal gradient, used on the largest display type only.
     Stays in the white-to-light-silver range on purpose. An earlier version
     dipped to --c-steel-400 mid-way and read as a dark band through the middle
     of the letterforms - wrong for the mark, and it hurt legibility. */
 --metal: linear-gradient(
    176deg,
    #FFFFFF 0%,
    #EDEFF2 30%,
    #C9CED4 55%,
    var(--c-steel-100) 80%,
    #FFFFFF 100%
  );

  /* ---- Typography ------------------------------------------------------- */
  /* Anton echoes the heavy, condensed weight of the logo wordmark.
     Archivo carries mid-level headings. Inter handles all body copy. */
 --font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
 --font-heading: "Archivo", "Arial Black", sans-serif;
 --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale - clamp(min, preferred, max) */
 --fs-xs:   0.75rem;
 --fs-sm:   0.875rem;
 --fs-base: 1rem;
 --fs-md:   clamp(1.0625rem, 0.4vw + 0.95rem, 1.125rem);
 --fs-lg:   clamp(1.25rem,  0.6vw + 1.1rem,  1.5rem);
 --fs-xl:   clamp(1.5rem,   1.2vw + 1.2rem,  2rem);
 --fs-2xl:  clamp(1.875rem, 2.4vw + 1.3rem,  3rem);
 --fs-3xl:  clamp(2.25rem,  4.6vw + 0.9rem,  4.5rem);
  /* Stats sit in narrow columns on mobile - capped tighter than the old value
     so "100,000+" cannot overflow a half-width column at 360px. */
 --fs-stat: clamp(1.75rem,  3.2vw + 0.9rem,  3.25rem);

 --lh-tight: 1.04;
 --lh-snug:  1.2;
 --lh-body:  1.65;

 --tracking-display: 0.005em;  /* Anton is already tight; do not negative-track */
 --tracking-label:   0.18em;

  /* ---- Spacing (8pt grid) ----------------------------------------------- */
 --sp-1:  0.25rem;
 --sp-2:  0.5rem;
 --sp-3:  0.75rem;
 --sp-4:  1rem;
 --sp-5:  1.5rem;
 --sp-6:  2rem;
 --sp-7:  3rem;
 --sp-8:  4rem;
 --sp-9:  6rem;
 --sp-10: 8rem;

 --section-y: clamp(3.5rem, 8vw, 8rem);

  /* ---- Layout ----------------------------------------------------------- */
 --container:      1200px;
 --container-wide: 1440px;
 --gutter:         clamp(1.125rem, 4vw, 3rem);

  /* ---- Radii, shadow, motion -------------------------------------------- */
  /* Sharp, not soft. The logo is all hard slab serifs and horn points - pills
     fought it. Corners are now near-square, and filled elements get a true
     chamfer (see --cut below), which reads as a struck metal plate. */
 --r-sm:   2px;
 --r-md:   3px;
 --r-lg:   4px;
 --r-xl:   6px;
 --r-pill: 2px;   /* legacy name, kept so no rule has to change */

  /* Chamfer depth for clip-path corner cuts */
 --cut:    9px;
 --cut-sm: 7px;

 --shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.95);
 --shadow-glow: 0 0 60px -14px rgba(212, 162, 76, 0.45);

 --ease:      cubic-bezier(0.22, 1, 0.36, 1);
 --dur-fast:  160ms;
 --dur:       320ms;
 --dur-slow:  680ms;

 --header-h: 76px;
 --z-header: 100;
 --z-menu:   200;

  /* Minimum comfortable touch target (WCAG 2.2 AA is 24px; 44px is Apple's) */
 --tap: 44px;
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}

/* Optional light section (press kit, invoices, print) */
.is-inverted {
 --bg:            var(--c-steel-100);
 --bg-alt:        #DCDFE3;
 --surface:       #FFFFFF;
 --text:          #4A4F56;
 --text-strong:   var(--c-ink);
 --text-muted:    var(--c-steel-400);
 --border:        rgba(5, 5, 4, 0.12);
 --border-strong: rgba(5, 5, 4, 0.26);
 --metal:         linear-gradient(176deg, #3D4249, #101214 55%, #3D4249);
}