/* ==========================================================================
   FunctionAlps showcase — tokens.css
   Adapted from the Habitline replica (public/design-ref/habitline/site/assets/css/tokens.css).
   Same token NAMES (so base/components/page CSS keep working), FunctionAlps VALUES:
   cream ground, dark text, forest primary, gold accent, stone secondary.
   Fonts: DM Serif Display (headings) + DM Sans (UI/body), loaded from Google Fonts
   in index.html (<link>), no @font-face here.
   ========================================================================== */
:root {
  /* brand */
  --fa-forest: #2E5438;
  --fa-forest-deep: #1F3A27;
  --fa-cream: #F5F0E8;
  --fa-gold: #C48B35;
  --fa-dark: #1A1A16;
  --fa-stone: #7A796F;

  /* colours by role (Habitline names kept) */
  --c-page: #F5F0E8;        /* page + fades (Habitline #f7f7f7) */
  --c-ink: #1A1A16;         /* text (Habitline #131515) */
  --c-ink-2: #5F5E55;       /* secondary text: stone, darkened for AA on cream (stone #7A796F is 3.9:1) */
  --c-stone: #7A796F;       /* captions, small meta */
  --c-muted: #CFC9BC;       /* text on dark */
  --c-line: #EAE3D6;        /* chips, light buttons */
  --c-white: #ffffff;
  --c-dark-card: #1F3A27;   /* dark cards (deep forest) */

  /* restrained accent set (Habitline's rainbow remapped) */
  --c-orange: #C48B35;      /* gold */
  --c-amber: #D6A45A;       /* light gold */
  --c-blue: #3F6680;        /* slate blue */
  --c-azure: #5F89A6;       /* soft blue */
  --c-green: #2E5438;       /* forest */
  --c-violet: #6F8F5E;      /* sage */
  --c-teal: #3F7A70;        /* green-teal */
  --c-red: #A8653E;         /* clay (rarely used) */
  --c-pink: #8FA878;        /* soft green */
  --c-ink-10: rgba(26, 26, 22, .1);
  --c-ink-30: rgba(26, 26, 22, .3);
  --c-ink-50: rgba(26, 26, 22, .5);
  --c-white-5: rgba(255, 255, 255, .05);
  --c-white-10: rgba(255, 255, 255, .1);
  --c-white-20: rgba(255, 255, 255, .2);

  /* fonts */
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-geist: "DM Sans", system-ui, sans-serif;

  /* radii */
  --r-card: 20px;
  --r-item: 16px;
  --r-sm: 10px;
  --r-xs: 8px;
  --r-pill: 100px;

  /* shadows */
  --sh-card: rgba(26, 26, 22, .06) 0 8px 20px 0;
  --sh-dark-btn: rgba(46, 84, 56, .35) 0 4px 10px 0, rgba(46, 84, 56, .3) 0 10px 30px 0;
  --sh-glass: rgba(26, 26, 22, .3) 0 10px 20px 0;
  --sh-ring: rgba(46, 84, 56, .08) 0 0 0 6px;
  --glow-orange: rgba(196, 139, 53, .45) 0 10px 15px 0;
  --glow-blue: rgba(63, 102, 128, .4) 0 10px 15px 0;
  --glow-azure: rgba(95, 137, 166, .4) 0 10px 15px 0;
  --glow-green: rgba(46, 84, 56, .45) 0 10px 15px 0;
  --glow-violet: rgba(111, 143, 94, .45) 0 10px 15px 0;
  --glow-teal: rgba(63, 122, 112, .4) 0 10px 15px 0;
  --glow-red: rgba(168, 101, 62, .4) 0 10px 15px 0;
  --glow-pink: rgba(143, 168, 120, .45) 0 10px 15px 0;
  --glow-white: rgba(255, 255, 255, .2) 0 10px 15px 0;

  /* layout */
  --container: 1260px;
  --gutter: 30px;
  --section-top: 200px;
}

/* ---- Type scale (desktop / tablet ≤1199 / phone ≤809) ----
   DM Serif Display ships one weight (400) and runs wider than Stack Sans Headline, so the
   display sizes are a step smaller and line-heights a little looser than Habitline's. */
:root {
  --t-hero: 400 84px/88px var(--f-display);
  --t-stat: 400 120px/120px var(--f-display);
  --t-digit: 400 68px/61.2px var(--f-display);
  --t-h2: 400 46px/54px var(--f-display);
  --t-words: 400 44px/54px var(--f-display);
  --t-h3l: 400 34px/40px var(--f-display);
  --t-cta-qr: 400 30px/36px var(--f-display);
  --t-h3: 400 25px/30px var(--f-display);
  --t-h4: 400 20px/25px var(--f-display);
  --t-lead: 400 21px/30px var(--f-body);
  --t-body: 400 17px/24px var(--f-body);
  --t-small: 400 15px/21px var(--f-body);
  --t-xs: 400 14px/19px var(--f-body);
  --t-ui: 500 15px/18px var(--f-ui);
}
@media (max-width: 1199.98px) {
  :root {
    --t-hero: 400 58px/62px var(--f-display);
    --t-stat: 400 100px/100px var(--f-display);
    --t-h2: 400 40px/48px var(--f-display);
    --t-words: 400 31px/40px var(--f-display);
    --t-cta-qr: 400 24px/29px var(--f-display);
    --t-lead: 400 19px/27px var(--f-body);
  }
}
@media (max-width: 809.98px) {
  :root {
    --t-hero: 400 42px/46px var(--f-display);
    --t-stat: 400 64px/64px var(--f-display);
    --t-digit: 400 40px/44px var(--f-display);
    --t-h2: 400 34px/41px var(--f-display);
    --t-words: 400 25px/33px var(--f-display);
    --t-h3l: 400 28px/34px var(--f-display);
    --t-cta-qr: 400 23px/28px var(--f-display);
    --t-h3: 400 21px/26px var(--f-display);
    --t-h4: 400 17px/22px var(--f-display);
    --t-lead: 400 17px/25px var(--f-body);
    --t-body: 400 16px/22px var(--f-body);
    --t-small: 400 15px/20px var(--f-body);
    --t-ui: 500 15px/19.5px var(--f-ui);
  }
}