/* ==========================================================================
   Meranti Works — design tokens
   Geometry, type scale and breakpoints are lifted verbatim from the source
   template's compiled CSS. Only the colour ramp is ours.

   Breakpoints (exactly as the template declares them):
     base  >= 1440
     L     1200 - 1439.98
     M      810 - 1199.98
     S     <= 809.98

   Note the two thresholds do NOT line up, and that is deliberate:
     - the type scale steps down below 1440
     - the page gutter steps down below 1200
   ========================================================================== */

:root {
  /* ---- brand ----
     The source template's own accent ramp, unchanged. */
  --accent:        #ff8a24;
  --accent-2:      #de8f07;
  --accent-3:      #c25800;
  --accent-ink:    #ffffff;   /* label colour on top of --accent, as the source has it */

  /* ---- surfaces (the source's neutral ramp, unchanged) ---- */
  --bg:            #0d0d0d;
  --surface-1:     #141414;
  --surface-2:     #1a1a1a;
  --surface-3:     #262626;
  --surface-4:     #292929;
  --surface-5:     #2e2e2e;
  --topbar:        rgba(33, 33, 33, .70);   /* #212121b3 */
  --scrollnav:     rgba(20, 20, 20, .80);   /* #141414cc */

  /* ---- ink ---- */
  --white:         #ffffff;
  --w-85:          rgba(255, 255, 255, .85);
  --w-70:          rgba(255, 255, 255, .70);
  --w-60:          rgba(255, 255, 255, .60);
  --w-50:          rgba(255, 255, 255, .50);
  --w-40:          rgba(255, 255, 255, .40);
  --w-30:          rgba(255, 255, 255, .30);
  --w-20:          rgba(255, 255, 255, .20);
  --w-12:          rgba(255, 255, 255, .12);
  --w-10:          rgba(255, 255, 255, .10);
  --w-06:          rgba(255, 255, 255, .06);
  --w-04:          rgba(255, 255, 255, .04);
  --grey-1:        #c8c8c8;
  --grey-2:        #969696;
  --grey-3:        #828282;

  --ink-dim:       var(--w-50);   /* body copy */
  --line:          var(--w-10);
  --line-soft:     var(--w-06);

  /* ---- type ---- */
  --font-display:  "Inter Display", "Inter", system-ui, sans-serif;
  --font-body:     "Inter", system-ui, sans-serif;
  --font-mono:     "Fragment Mono", ui-monospace, monospace;

  --h1:        56px;  --h1-ls: -.025em; --h1-lh: 100%;
  --h2:        48px;  --h2-ls: -.02em;  --h2-lh: 100%;
  --h3:        32px;  --h3-ls: -.01em;  --h3-lh: 110%;
  --h3-sm:     24px;
  --h4:        20px;
  --lead:      28px;
  --body:      16px;
  --eyebrow:   14px;  --eyebrow-ls: 1.11px;
  --micro:     12px;  --micro-ls: 1px;

  /* ---- geometry ---- */
  --gutter:        88px;   /* page side padding */
  --inset:         12px;   /* the rounded-container inset around full-bleed sections */
  --maxw:          1440px;
  --r-xs:           3px;
  --r-sm:           8px;
  --r-md:          12px;
  --r-lg:          16px;
  --r-pill:        96px;

  --gap-1:          4px;
  --gap-2:          8px;
  --gap-3:         12px;
  --gap-4:         16px;
  --gap-5:         24px;
  --gap-6:         32px;
  --gap-7:         48px;
  --gap-8:         56px;
  --gap-9:         64px;

  --nav-h:        122px;   /* closed desktop nav */
  --topbar-h:      30px;
  --mainnav-h:     48px;
  --scrollnav-h:   80px;

  /* ---- motion ----
     The two signatures counted in the source bundle:
       interactions  spring duration .4  bounce .2   (60 uses)
       scroll reveal spring duration 1.5 bounce 0    (26 uses)
     Expressed here as the closest CSS easing equivalents; the JS uses the
     spring values directly where it matters. */
  --ease-spring:   cubic-bezier(.34, 1.26, .64, 1);   /* ~ bounce .2 */
  --ease-smooth:   cubic-bezier(.44, 0, .56, 1);      /* the template's tween ease */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --t-fast:        .2s;
  --t-base:        .4s;
  --t-slow:        .6s;
  --t-reveal:      1.5s;
}

/* ---- L: 1200 – 1439.98 : type steps down, gutter does not ---- */
@media (max-width: 1439.98px) {
  :root {
    --h1:   45px;
    --h2:   40px;
    --h3:   26px;
    --h4:   16px;
    --lead: 22px;
  }
}

/* ---- M: 810 – 1199.98 : gutter steps down, h3-sm steps down ---- */
@media (max-width: 1199.98px) {
  :root {
    --gutter: 48px;
    --h3-sm:  20px;
  }
}

/* ---- S: <= 809.98 ---- */
@media (max-width: 809.98px) {
  :root {
    --h1:     36px;
    --h2:     32px;
    --h3:     20px;
    --lead:   18px;
    --body:   13px;
    --gutter: 20px;
    --inset:   8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-base: .01ms; --t-slow: .01ms; --t-reveal: .01ms; }
}