/* ==========================================================================
   DGY GROUP — DESIGN TOKENS
   Single source of truth. Every value in main.css derives from this file.
   Colours come from the DGY Group brand kit; roles are assigned below.
   ========================================================================== */

/* Display face is self-hosted (SIL OFL) so headline rendering never depends
   on a third-party CDN. Body face loads from Google Fonts, with the brand's
   stated Arial fallback behind it. */
@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/dm-serif-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* ---------- BRAND CORE ------------------------------------------------ */
  --dgy-ink:        #042729;  /* Primary. Dark canvas, headlines on light   */
  --dgy-ink-deep:   #023337;  /* Accent. Second dark layer, gradients       */
  --dgy-slate:      #192733;  /* Extended. Third dark layer, deep footers   */
  --dgy-plum:       #46062b;  /* Secondary. Rewards + depth                 */
  --dgy-sage:       #b9cdbe;  /* Accent. Hairlines, soft surfaces, diagram  */
  --dgy-amber:      #ffbc4b;  /* Accent. THE action colour. CTAs only.      */
  --dgy-gold:       #c5a059;  /* Extended. Rewards programme only.          */
  --dgy-vortx:      #ff4800;  /* Extended. VortX event only.                */
  --dgy-black:      #141414;  /* Extended. Pure text weight when needed     */

  /* ---------- SURFACES -------------------------------------------------- */
  --surface-0:      #ffffff;
  --surface-1:      #fcfcfc;  /* default page                               */
  --surface-2:      #f5f7ee;  /* warm band                                  */
  --surface-3:      #f4f5f9;  /* cool band                                  */
  --surface-sage:   #eef3ef;  /* sage tint, 20% sage over paper             */

  /* ---------- TEXT ------------------------------------------------------ */
  --text-strong:    #042729;
  --text-body:      #2c3f41;
  --text-muted:     #5f7375;
  --text-faint:     #8b9b9c;
  --text-on-dark:         #f3f6f2;
  --text-on-dark-muted:   #a9bdb5;
  --text-on-dark-faint:   #74908b;

  /* ---------- LINES ----------------------------------------------------- */
  --rule:            rgba(4, 39, 41, 0.12);
  --rule-strong:     rgba(4, 39, 41, 0.22);
  --rule-on-dark:    rgba(185, 205, 190, 0.20);
  --rule-on-dark-2:  rgba(185, 205, 190, 0.34);

  /* ---------- TYPE ------------------------------------------------------ */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "Google Sans Flex", "Google Sans", Arial, Helvetica, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --step-display-1: clamp(2.75rem, 6.1vw, 5.25rem);   /* hero h1        */
  --step-display-2: clamp(2.05rem, 4.1vw, 3.375rem);  /* page h1 / h2   */
  --step-display-3: clamp(1.55rem, 2.5vw, 2.125rem);  /* h3 / band head */
  --step-title:     1.3125rem;                        /* card title     */
  --step-body-lg:   1.125rem;
  --step-body:      1rem;
  --step-small:     0.875rem;
  --step-tiny:      0.8125rem;
  --step-label:     0.6875rem;                        /* eyebrow/label  */

  --leading-display: 1.04;
  --leading-title:   1.22;
  --leading-body:    1.62;

  --track-display: -0.018em;
  --track-label:    0.15em;
  --track-mono:     0.02em;

  /* ---------- SPACE ----------------------------------------------------- */
  --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: 5rem;     --sp-10: 7rem;    --sp-11: 10rem;

  --band-y:       clamp(4.5rem, 8vw, 7.5rem);   /* section padding block  */
  --band-y-tight: clamp(3rem, 5vw, 4.5rem);
  --shell:        1240px;                        /* max content width      */
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- SHAPE ----------------------------------------------------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 999px;

  /* Sharp everywhere, round only on actions. The button is the one
     tactile element on the page, so it earns the pill.                   */

  --shadow-1: 0 1px 2px rgba(4, 39, 41, 0.04);
  --shadow-2: 0 2px 4px rgba(4, 39, 41, 0.04), 0 14px 34px rgba(4, 39, 41, 0.07);
  --shadow-3: 0 4px 8px rgba(4, 39, 41, 0.05), 0 24px 60px rgba(4, 39, 41, 0.12);

  /* ---------- MOTION ---------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur-mid:   320ms;
  --dur-slow:  620ms;
  --dur-draw:  1400ms;

  /* ---------- ATMOSPHERE ------------------------------------------------
     Channel triplets are the brand colours above, decomposed so they can
     be composed at any alpha without a second hex entering the system.
     --rgb-sage is #b9cdbe, --rgb-amber is #ffbc4b, --rgb-plum is #46062b. */
  --rgb-sage:  185 205 190;
  --rgb-amber: 255 188  75;
  --rgb-plum:   70   6  43;

  /* Cursor-tracked spotlight. Surfaces override size, tint and strength;
     these are the defaults everything inherits. JS writes --mx / --my as
     unitless numbers, multiplied to px at the point of use.              */
  --spot-size:     26rem;
  --spot-tint:     var(--rgb-sage);
  --spot-strength: 0.30;
  --spot-fade:     420ms;   /* opacity in / out                           */
  --spot-follow:   140ms;   /* transform trail behind the pointer         */

  /* Ambient drift on dark canvases.                                      */
  --drift-dur: 18s;

  /* Footer canvas. Plum, not slate — the approved direction.             */
  --footer-bg: var(--dgy-plum);

  --z-nav: 100;
  --z-drawer: 200;
}