/* ============================================================
   DESIGN TOKENS
   Source-of-truth for all visual values.
   All values reverse-engineered from adasilv2.framer.website
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────── */
  --color-bg:              #f0f0ee;   /* Reference: off-white hero background */

  --color-bg-white:        #ffffff;
  --color-bg-dark:         #313131;
  --color-bg-darker:       #161515;

  --color-text:            #161515;
  --color-text-muted:      #858585;
  --color-text-light:      #ffffff;
  --color-text-on-dark:    #fafafa;

  --color-accent:          #ff4000;
  --color-accent-blue:     #0151fe;
  --color-accent-blue-lt:  #c1dcfa;
  --color-accent-tag:      #4a77ff;

  --color-border:          #c7c7c7;
  --color-border-light:    #d0d0d0;
  --color-border-blue:     #bdf;    /* marquee bar light */
  --color-border-blue2:    #cef;

  --color-card-bg:         #ffffff;
  --color-card-shadow:     rgba(94, 94, 94, 0.17);
  --color-glass-bg:        rgba(255, 255, 255, 0.86);

  /* ── Typography ─────────────────────────────────────── */
  --font-primary:          'DM Sans', 'DM Sans Placeholder', Arial, sans-serif;
  --font-accent:           'Architects Daughter', cursive;
  --font-secondary:        'Inter', 'Inter Placeholder', Arial, sans-serif;

  --fw-light:              300;
  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;
  --fw-black:              900;

  /* Font sizes */
  --fs-xs:                 11px;
  --fs-sm:                 13px;
  --fs-base:               14px;
  --fs-md:                 16px;
  --fs-lg:                 18px;
  --fs-xl:                 22px;
  --fs-2xl:                28px;
  --fs-3xl:                38px;
  --fs-4xl:                56px;
  --fs-5xl:                72px;
  --fs-hero:               96px;

  /* Line heights */
  --lh-tight:              1.05;
  --lh-snug:               1.2;
  --lh-normal:             1.4;
  --lh-relaxed:            1.6;

  /* Letter spacings */
  --ls-tight:              -0.03em;
  --ls-normal:             -0.01em;
  --ls-wide:               0.04em;
  --ls-wider:              0.08em;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-14:              56px;
  --space-16:              64px;
  --space-20:              80px;
  --space-24:              96px;
  --space-32:              128px;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:             1318px;
  --nav-height:            80px;
  --section-pad-x:         40px;

  /* ── Border Radii ────────────────────────────────────── */
  --radius-sm:             8px;
  --radius-md:             14px;
  --radius-lg:             20px;
  --radius-xl:             27px;
  --radius-badge:          57px;
  --radius-pill:           100px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card:           0 6.05px 58px rgba(94, 94, 94, 0.17);
  --shadow-card-hover:     0 20px 80px rgba(94, 94, 94, 0.28);
  --shadow-glass:          0 4px 24px rgba(0, 0, 0, 0.08);

  /* ── Animations & Easings ────────────────────────────── */
  --ease-standard:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:              cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:           cubic-bezier(0.4, 0, 0.6, 1);

  --dur-instant:           80ms;
  --dur-fast:              150ms;
  --dur-medium:            300ms;
  --dur-slow:              500ms;
  --dur-slower:            700ms;
  --dur-page:              900ms;

  --stagger-base:          60ms;

  /* ── Breakpoints (for JS reference) ─────────────────── */
  --bp-mobile:             809px;
  --bp-tablet:             1199px;
  --bp-desktop:            1648px;

}