/* ============================================================================
   Odleasing — Design Tokens · Art direction "Studio Lumière"
   Light, photographic off-white base + deep graphite ink, a BI-COLOUR accent
   (warm amber ↔ cool sky) echoing the kit's adjustable colour temperature, soft
   light-glow gradients and a 3200K↔5600K temperature-scale motif. One direction,
   site-wide. Display: Sora. Body: Inter. Technical labels: JetBrains Mono.
   WCAG AA — warm amber is decorative only; interactive text uses the deep cool blue.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces & ink ------------------------------------------ */
  --c-base:        #F7F6F3;   /* page background (warm off-white)          */
  --c-surface:     #FFFFFF;   /* cards                                     */
  --c-surface-2:   #F0EEE8;   /* alt sections / subtle fills               */
  --c-paper:       #FBFAF8;   /* header / near-white                       */
  --c-ink:         #17181B;   /* primary text (graphite near-black)        */
  --c-ink-soft:    #54565E;   /* secondary text (AA on base)               */
  --c-ink-faint:   #888A92;   /* meta / captions                          */

  /* ---- Bi-colour accent (warm ↔ cool — the colour-temperature motif) --- */
  --c-warm:        #FFB257;   /* amber — decorative (glow, gradient, tints) */
  --c-warm-soft:   #FFC988;
  --c-warm-tint:   #FFF1DF;   /* amber-tinted background                   */
  --c-warm-ink:    #9A5A05;   /* deep amber for text/icons (AA on white)   */
  --c-warm-rgb:    255, 178, 87;

  --c-cool:        #3FA9FF;   /* sky — decorative (glow, gradient, tints)  */
  --c-cool-soft:   #8CCBFF;
  --c-cool-tint:   #E6F3FF;   /* sky-tinted background                     */
  --c-cool-rgb:    63, 169, 255;

  /* Primary interactive colour = deep cool blue (AA on white ≈ 4.9:1).    */
  --c-accent:      #0E6FBE;   /* links, focus, primary accent              */
  --c-accent-700:  #0B5C9E;   /* hover / active                            */
  --c-accent-300:  #7FC2FF;   /* accent on dark surfaces                   */
  --c-accent-rgb:  14, 111, 190;

  /* The signature warm→cool gradient (CCT scale, glints, underlines).     */
  --grad-cct:      linear-gradient(90deg, #FFB257 0%, #FF9D6B 26%, #C79BC9 55%, #6FB8FF 78%, #3FA9FF 100%);
  --grad-cct-soft: linear-gradient(90deg, rgba(255,178,87,.85), rgba(63,169,255,.85));

  --c-ok:          #2E7D54;   /* trust checks                              */
  --c-ok-tint:     #E3F2E9;
  --c-warn:        #9A6312;   /* honest "verify" notes                     */

  /* ---- Lines & shadows ------------------------------------------------- */
  --c-line:        #E7E3D9;   /* hairline borders                          */
  --c-line-strong: #D4CFC2;
  --c-ink-rgb:     23, 24, 27;
  --sh-sm:  0 1px 2px rgba(var(--c-ink-rgb), .05), 0 1px 1px rgba(var(--c-ink-rgb), .04);
  --sh-md:  0 10px 26px rgba(var(--c-ink-rgb), .08), 0 2px 6px rgba(var(--c-ink-rgb), .05);
  --sh-lg:  0 28px 60px rgba(var(--c-ink-rgb), .13), 0 10px 22px rgba(var(--c-ink-rgb), .07);
  --sh-glow: 0 18px 44px rgba(var(--c-warm-rgb), .26), 0 18px 44px rgba(var(--c-cool-rgb), .22);

  /* ---- Dark surface (form section + footer) ---------------------------- */
  --c-dark:        #15161A;   /* deep graphite                             */
  --c-dark-2:      #1E2026;   /* raised dark panel                         */
  --c-on-dark:     #F4F3EF;
  --c-on-dark-soft:#A8AAB3;
  --c-dark-line:   rgba(244, 243, 239, .13);

  /* ---- Typography ------------------------------------------------------ */
  --f-display: "Sora", "Inter", system-ui, sans-serif;                    /* headings */
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fs-2xs: .75rem;     /* 12 */
  --fs-xs:  .8125rem;   /* 13 */
  --fs-sm:  .9375rem;   /* 15 */
  --fs-md:  1.0625rem;  /* 17 */
  --fs-lg:  1.25rem;    /* 20 */
  --fs-xl:  1.5rem;     /* 24 */
  --fs-2xl: 2.05rem;    /* ~33 */
  --fs-3xl: 2.6rem;     /* ~42 */
  --fs-4xl: clamp(2.5rem, 1.2rem + 4.8vw, 4.5rem);   /* hero / display */

  --lh-tight: 1.04;
  --lh-snug:  1.16;
  --lh-body:  1.7;

  --tracking-cap: .16em;   /* uppercase mono technical labels */

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* ---- Radii (soft, modern, photographic) ----------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --wrap:        1180px;
  --wrap-narrow: 760px;
  --header-h:    68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}