/* ===========================================================================
   BORDERNEX — design tokens, v3
   Palette as fixed in the brief of 06/11/2026: orange leads, forest green
   anchors, ivory and white carry the content.

   Fonts — put this in <head> before this file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap">
   =========================================================================== */

:root {
  /* --- Brand palette (from the brief) ----------------------------------- */
  --orange:       #F58220;   /* primary orange — header, buttons, highlights */
  --orange-vivid: #FF7900;   /* vibrant orange — hover, small accents        */
  --green-800:    #1F5E3B;   /* deep forest green — accents, banners         */
  --green-900:    #103D2B;   /* dark forest green — premium content blocks   */
  --white:        #FFFFFF;   /* warm white — cards, header text              */
  --ivory:        #FAF8F4;   /* soft ivory — the page ground                 */
  --neutral:      #F4F5F2;   /* light neutral — banded sections              */
  --ink:          #17241D;   /* dark text                                    */

  /* --- Derived, for contrast only ---------------------------------------- */
  --orange-text:  #BF5A06;   /* orange dark enough to WRITE with on ivory (4.6:1) */
  --orange-100:   #FDE7D2;   /* orange tint for icon chips                    */
  --ink-muted:    #58665F;   /* secondary text on ivory/white (5.9:1)         */
  --paper-muted:  #B9C9BF;   /* secondary text on green-900 (8.1:1)           */
  --line:         #E8E4DC;   /* hairlines and card borders only               */
  --line-green:   rgba(255,255,255,.16);

  /* --- Contrast facts (WCAG 2.1, measured) -------------------------------
     ink / orange ..................  6.2:1  → text ON orange is ink, not white
     white / orange ................  2.6:1  → never small white text on orange
     orange / green-900 ............  4.7:1  → orange text is fine on dark green
     white / green-900 ............. 12.2:1
     orange-text / ivory ...........  4.6:1  → the orange you write with on light
     orange / ivory ................  2.9:1  → fills, icons, rules only
     So: on the orange header, text and the logo are INK. Orange buttons carry
     INK labels. Orange is a fill colour on light grounds, a text colour only
     on dark green.                                                           */

  --bg:           var(--ivory);
  --text:         var(--ink);
  --accent:       var(--orange);

  --grad-orange:  linear-gradient(135deg, #F58220 0%, #FF7900 100%);
  --grad-green:   linear-gradient(135deg, #103D2B 0%, #1F5E3B 100%);
  --grad-hero:    linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Manrope", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fluid-display: clamp(2.4rem, 4.4vw, 4rem);     /* 38 → 64px */
  --fluid-h1:      clamp(1.9rem, 3vw, 2.75rem);    /* 30 → 44px */
  --fluid-h2:      clamp(1.7rem, 2.5vw, 2.25rem);   /* 27 → 36px */
  --size-h3:       1.25rem;
  --size-body-lg:  1.125rem;
  --size-body:     1.0625rem;
  --size-small:    .9375rem;
  --size-label:    .8125rem;
  --lh-display:    1.06;
  --lh-h2:         1.16;
  --lh-body:       1.7;
  --ls-display:   -.015em;
  --ls-label:      .01em;   /* sentence case labels, no wide tracking */

  /* --- Space, shape, motion ---------------------------------------------- */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(2.5rem, 4vw, 4rem);     /* 40 → 64px: every block fits one screen */

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(16,61,43,.06);
  --shadow:    0 14px 40px rgba(16,61,43,.10);
  --shadow-lg: 0 28px 70px rgba(16,61,43,.16);
  --shadow-orange: 0 12px 30px rgba(245,130,32,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;
  --dur-slow: 560ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; --dur-slow: 0ms; } }