/* ============================================================
   ASTTERO DESIGN SYSTEM — tokens.css
   Single source of truth for all design tokens.
   Version 1.0 — May 2026

   USAGE
   ─────
   <link rel="stylesheet" href="/design-system/tokens.css">
   Then reference any token in any CSS file or inline style.
   Never hardcode a hex value — use a token.

   SECTIONS
   ────────
   1. Font import
   2. Colors — primitives
   3. Colors — semantic aliases
   4. Colors — special effects
   5. Typography — scale
   6. Typography — semantic shorthands
   7. Spacing
   8. Layout
   9. Borders & radius
   10. Shadows
   11. Z-index
   12. Motion
   13. Legacy aliases (keeps css/style.css working during migration)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap');

:root {

  /* ── 1. FONTS ── */
  --font-sans: 'DM Sans', sans-serif;


  /* ══════════════════════════════════════════
     2. COLORS — PRIMITIVES
     Raw values. Use semantic aliases below
     whenever possible.
     ══════════════════════════════════════════ */

  /* Neutrals */
  --primitive-black:       #1A1A18;   /* warm near-black, not pure black */
  --primitive-dark-2:      #2D2D28;   /* dark bg dividers */
  --primitive-dark-3:      #3A3A36;   /* dark secondary text */
  --primitive-mid:         #5A5A54;   /* secondary body text */
  --primitive-muted:       #8A8A80;   /* captions, labels */
  --primitive-subtle:      #B0AFA8;   /* placeholders, legal */
  --primitive-divider:     #E0DCD6;   /* 1px rules on white */
  --primitive-off-white:   #F5F4F0;   /* surface alt — feature cards, subtle bg */
  --primitive-white:       #FFFFFF;   /* page background */

  /* Accent */
  --primitive-accent:      #C8A06E;   /* warm gold — reserved, use sparingly */

  /* Pastels (watermark gradient) */
  --primitive-pastel-1:    #FFD4A8;
  --primitive-pastel-2:    #FFC2D1;
  --primitive-pastel-3:    #E0C8F0;
  --primitive-pastel-4:    #C9E4DE;
  --primitive-pastel-5:    #FDE5C8;

  /* Waveform */
  --primitive-wave-1:      #FA8F73;
  --primitive-wave-2:      #8C5CD9;
  --primitive-wave-3:      #47BAD9;
  --primitive-wave-4:      #F2C76B;

  /* Oilspill / iridescent */
  --primitive-oil-1:       #FFD700;
  --primitive-oil-2:       #FF6EB4;
  --primitive-oil-3:       #4FC3F7;
  --primitive-oil-4:       #A78BFA;
  --primitive-oil-5:       #38EF7D;


  /* ══════════════════════════════════════════
     3. COLORS — SEMANTIC ALIASES
     These are what you use in components.
     ══════════════════════════════════════════ */

  /* Backgrounds */
  --color-bg:              var(--primitive-white);
  --color-bg-alt:          var(--primitive-off-white);   /* feature cards, subtle surfaces */
  --color-bg-dark:         var(--primitive-black);       /* metrics bar, accordion, dark tiles */

  /* Text */
  --color-text:            var(--primitive-black);       /* primary — headlines, labels */
  --color-text-secondary:  var(--primitive-mid);         /* body copy on white */
  --color-text-muted:      var(--primitive-muted);       /* captions, metric labels, eyebrows on dark */
  --color-text-subtle:     var(--primitive-subtle);      /* placeholders, footer copy, legal */
  --color-text-inverse:    var(--primitive-white);       /* text on dark backgrounds */
  --color-text-nav:        var(--primitive-dark-3);      /* nav link default state */

  /* Borders / Dividers */
  --color-border:          var(--primitive-divider);     /* 1px rules on white bg */
  --color-border-dark:     rgba(255, 255, 255, 0.145);   /* 1px rules on dark bg */
  --color-border-dark-mid: rgba(255, 255, 255, 0.21);    /* vertical rules on dark bg */

  /* Interactive */
  --color-accent:          var(--primitive-accent);      /* warm gold — use sparingly */
  --color-hover-light:     rgba(0, 0, 0, 0.04);         /* hover bg on white */
  --color-hover-dark:      rgba(255, 255, 255, 0.04);   /* hover bg on dark */


  /* ══════════════════════════════════════════
     4. COLORS — SPECIAL EFFECTS
     Gradients & glass — reference by name.
     ══════════════════════════════════════════ */

  /* Pastel gradient — watermark A background */
  --gradient-pastel:
    linear-gradient(135deg,
      var(--primitive-pastel-1),
      var(--primitive-pastel-2),
      var(--primitive-pastel-3),
      var(--primitive-pastel-4),
      var(--primitive-pastel-5));

  /* Waveform gradient — "Why Us" animated SVG paths */
  --gradient-wave:
    linear-gradient(90deg,
      var(--primitive-wave-1),
      var(--primitive-wave-2),
      var(--primitive-wave-3),
      var(--primitive-wave-4));

  /* Oilspill — iridescent mix-blend overlay on dark buttons */
  --gradient-oilspill:
    conic-gradient(from 0deg,
      var(--primitive-oil-1),
      var(--primitive-oil-2),
      var(--primitive-oil-3),
      var(--primitive-oil-4),
      var(--primitive-oil-5),
      var(--primitive-oil-2),
      var(--primitive-oil-1));

  /* Glass morphism — nav pill, CTA buttons */
  --glass-bg:              rgba(255, 255, 255, 0.44);
  --glass-border:          rgba(255, 255, 255, 0.4);
  --glass-blur:            blur(40px);
  --glass-shadow:          0 4px 20px rgba(0, 0, 0, 0.1);
  --glass-highlight:       inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --glass-shimmer-opacity: 0.12;   /* oilspill overlay on glass — screen blend */

  /* Watermark opacity levels */
  --wm-opacity-hero:       0.85;   /* large hero watermark */
  --wm-opacity-section:    0.28;   /* background section watermark */


  /* ══════════════════════════════════════════
     5. TYPOGRAPHY — SCALE
     ══════════════════════════════════════════ */

  /* Size */
  --text-display:    100px;   /* hero h1, section headlines (Why, Contact) */
  --text-h2:          32px;   /* card titles, case titles */
  --text-h3:          22px;   /* why-block headings */
  --text-body-lg:     22px;   /* lead paragraph / why-sub */
  --text-body:        16px;   /* standard body copy */
  --text-body-md:     17px;   /* pain, nav links */
  --text-body-sm:     15px;   /* process body, dropdown links */
  --text-body-xs:     14px;   /* footer links, metric label, eyebrow */
  --text-nav:         17px;   /* nav link default */
  --text-metric:      26px;   /* metrics bar numbers */
  --text-eyebrow:     11px;   /* ALL CAPS section labels (cases, why-tag etc.) */
  --text-tag:         16px;   /* hero page tag (bullet dot) */
  --text-form-label:  12px;   /* form field labels */
  --text-legal:       12px;   /* footer copy, copyright */

  /* Weight */
  --weight-thin:       200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Letter-spacing */
  --tracking-tight-xl: -4px;    /* display headlines */
  --tracking-tight-lg: -2px;    /* large numbers, process titles */
  --tracking-tight-md: -1px;    /* h2 card titles, metrics */
  --tracking-tight-sm: -0.5px;  /* h3 headings */
  --tracking-normal:    0px;
  --tracking-wide-sm:   0.3px;  /* hero tag */
  --tracking-wide-md:   2px;    /* form labels, metric labels */
  --tracking-wide-lg:   3px;    /* ALL CAPS eyebrow labels */

  /* Line-height */
  --leading-display:    0.93;   /* tight — large section headlines */
  --leading-hero:       1.05;   /* hero h1 */
  --leading-heading:    1.1;    /* h2 card titles */
  --leading-subhead:    1.2;    /* h3 */
  --leading-body:       1.65;   /* standard body */
  --leading-body-lg:    1.7;    /* lead paragraph, pain copy */
  --leading-body-loose: 1.8;    /* form inputs */
  --leading-ui:         1;      /* nav, buttons, single-line UI */
  --leading-legal:      1.5;    /* footer copy */


  /* ══════════════════════════════════════════
     6. TYPOGRAPHY — SEMANTIC SHORTHANDS
     font: weight size/line-height family
     Use in components as: font: var(--type-display)
     ══════════════════════════════════════════ */

  --type-display:   var(--weight-light)    var(--text-display)  / var(--leading-display) var(--font-sans);
  --type-h2:        var(--weight-bold)     var(--text-h2)       / var(--leading-heading)  var(--font-sans);
  --type-h3:        var(--weight-bold)     var(--text-h3)       / var(--leading-subhead)  var(--font-sans);
  --type-body-lg:   var(--weight-regular)  var(--text-body-lg)  / var(--leading-body-lg)  var(--font-sans);
  --type-body:      var(--weight-regular)  var(--text-body)     / var(--leading-body)     var(--font-sans);
  --type-body-sm:   var(--weight-regular)  var(--text-body-sm)  / var(--leading-body)     var(--font-sans);
  --type-nav:       var(--weight-regular)  var(--text-nav)      / var(--leading-ui)       var(--font-sans);
  --type-eyebrow:   var(--weight-semibold) var(--text-eyebrow)  / var(--leading-ui)       var(--font-sans);
  --type-tag:       var(--weight-regular)  var(--text-tag)      / var(--leading-ui)       var(--font-sans);
  --type-form-label:var(--weight-semibold) var(--text-form-label)/ var(--leading-ui)      var(--font-sans);
  --type-legal:     var(--weight-regular)  var(--text-legal)    / var(--leading-legal)    var(--font-sans);
  --type-metric:    var(--weight-light)    var(--text-metric)   / var(--leading-ui)       var(--font-sans);


  /* ══════════════════════════════════════════
     7. SPACING
     Used for padding, margin, gap.
     Named by size, not by number.
     ══════════════════════════════════════════ */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-11:  56px;   /* ← page horizontal padding */
  --space-12:  64px;
  --space-13:  80px;
  --space-14: 100px;
  --space-15: 120px;
  --space-16: 140px;

  /* Semantic spacing aliases */
  --page-pad-x:         var(--space-11);   /* 56px — horizontal padding, all sections */
  --section-pad-y:      var(--space-16);   /* 140px — major section top padding */
  --section-pad-y-md:   var(--space-13);   /* 80px — standard section padding */
  --section-pad-y-sm:   var(--space-12);   /* 64px — compact section padding */
  --nav-height:          84px;             /* fixed nav height */
  --footer-col-gap:     var(--space-13);   /* 80px — footer column gap */
  --footer-main-gap:    var(--space-15);   /* 120px — footer left-to-cols gap */


  /* ══════════════════════════════════════════
     8. LAYOUT
     ══════════════════════════════════════════ */

  --max-width-site:   1440px;   /* accordion section max-width */
  --max-width-copy:    747px;   /* why-sub, lead paragraph */
  --max-width-body:    540px;   /* block-content body text */
  --max-width-narrow:  380px;   /* accordion body, form note */
  --max-width-card:    440px;   /* dark CTA tile title */


  /* ══════════════════════════════════════════
     9. BORDERS & RADIUS
     ══════════════════════════════════════════ */

  --radius-pill:   100px;   /* buttons, nav pill */
  --radius-sm:       8px;   /* dropdown items */
  --radius-none:      0px;  /* cards, sections — flat by default */

  --border-1:      1px solid var(--color-border);         /* dividers on white */
  --border-dark-1: 1px solid var(--color-border-dark);    /* dividers on dark */
  --border-form:   1px solid var(--color-text);           /* form field bottom line */


  /* ══════════════════════════════════════════
     10. SHADOWS
     ══════════════════════════════════════════ */

  --shadow-glass:       0 4px 20px rgba(0, 0, 0, 0.10);   /* nav pill, glass buttons */
  --shadow-glass-sm:    0 2px 12px rgba(0, 0, 0, 0.10);   /* smaller glass elements */
  --shadow-nav-outline: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.10));  /* SVG nav outline */
  /* No card shadows. No elevation. */


  /* ══════════════════════════════════════════
     11. Z-INDEX
     ══════════════════════════════════════════ */

  --z-base:        0;
  --z-watermark:   0;    /* bg decorative element */
  --z-content:     1;    /* section content above watermark */
  --z-sticky:      2;    /* sticky/in-flow UI inside sections */
  --z-nav:       100;    /* fixed nav bar */
  --z-wordmark:  200;    /* fixed logo (above nav) */
  --z-overlay:   300;    /* modal, drawer, overlay panels */


  /* ══════════════════════════════════════════
     12. MOTION
     ══════════════════════════════════════════ */

  /* Durations */
  --duration-fast:      0.15s;
  --duration-hover:     0.20s;
  --duration-nav:       0.30s;
  --duration-shape:     0.35s;
  --duration-scroll:    0.55s;   /* accordion, scroll-linked */
  --duration-count:     0.60s;   /* metrics count-up fade */

  /* Easings */
  --ease-linear:        linear;
  --ease-out:           ease;
  --ease-hover:         0.20s ease;                         /* hover state shorthand */
  --ease-nav-item:      cubic-bezier(0.20, 0.80, 0.20, 1);  /* nav link slide */
  --ease-shape:         cubic-bezier(0.25, 0.80, 0.25, 1);  /* pill morph */
  --ease-accordion:     cubic-bezier(0.70, 0.00, 0.20, 1);  /* accordion — sharp decel */

  /* Transition shorthands */
  --transition-hover:   opacity var(--duration-hover) var(--ease-out),
                        transform var(--duration-hover) var(--ease-out);
  --transition-color:   color var(--duration-hover) var(--ease-out);
  --transition-nav:     opacity var(--duration-nav) var(--ease-nav-item),
                        transform var(--duration-nav) var(--ease-nav-item);


  /* ══════════════════════════════════════════
     13. LEGACY ALIASES
     Maps old css/style.css variable names to
     the canonical token names above.
     Remove each alias once style.css is updated
     to use canonical names.
     ══════════════════════════════════════════ */

  --white:      var(--primitive-white);
  --dark:       var(--primitive-black);
  --dark2:      var(--primitive-dark-2);
  --dark3:      var(--primitive-dark-3);
  --off-white:  var(--primitive-off-white);
  --muted:      var(--primitive-muted);
  --muted2:     var(--primitive-subtle);
  --body:       var(--primitive-mid);
  --divider:    var(--primitive-divider);
  --accent:     var(--primitive-accent);
  --font:       var(--font-sans);

}


/* ══════════════════════════════════════════
   BASE RESET
   Minimal reset — lives here so every page
   that links tokens.css also gets the reset.
   ══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

a {
  text-decoration: none;
  color: inherit;
}

img, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}