/* ============================================================
   holdfast design tokens
   layer 1 of the design system, v1.1.0

   every value verified line by line against the locked source,
   holdfast-direction-1-cards-refined-white-body.html

   load order on every page: tokens.css, then base.css
   hard rules: no font weight above 500, sentence case always,
   body text on navy is pure white, no em dashes anywhere
   ============================================================ */

:root {

  /* ------------------------------------------------------------
     color, navy zones
     ------------------------------------------------------------ */
  --bg-navy:        #0E2A3F;              /* hero, header, footer bg */
  --bg-header:      rgba(14, 42, 63, 0.94);  /* sticky header glass, pairs with --header-blur */
  --text-cream:     #E8DCC4;              /* hero headline, wordmark, footer bottom line */
  --text-white:     #FFFFFF;              /* all body, subhead, nav and footer text on navy */

  /* ------------------------------------------------------------
     color, light zones
     ------------------------------------------------------------ */
  --bg-white:       #FFFFFF;              /* tools section, closing cta */
  --bg-tools-hover: #FBFCFA;              /* tool card hover wash */
  --bg-how:         #F2F6EE;              /* how-it-works section, pale kelp tint */
  --bg-promise:     #F6EFE3;              /* promise section, warm sandstone tint */
  --text-ink:       #15201F;              /* primary body text on light */
  --text-navy:      #0E2A3F;              /* headings on light */
  --text-muted:     #5B6B72;              /* secondary body text on light */

  /* ------------------------------------------------------------
     color, coral block
     ------------------------------------------------------------ */
  --bg-coral:       #C56340;              /* stats section bg, primary cta bg */
  --coral-hover:    #B5552F;              /* primary cta hover bg, from source */
  --text-cream-2:   #FDF1E6;              /* all text on coral */

  /* ------------------------------------------------------------
     color, accents
     ------------------------------------------------------------ */
  --kelp-mid:       #4A7C4E;              /* eyebrows on light, section accent bars, step i */
  --kelp-bright:    #B5DCB8;              /* eyebrows on navy, footer section labels */
  --coral:          #C56340;              /* cta buttons, open links, step ii */

  /* ------------------------------------------------------------
     color, borders and dividers, all from source
     ------------------------------------------------------------ */
  --border-light:       rgba(14, 42, 63, 0.14);     /* tool card borders on white */
  --border-faint:       rgba(14, 42, 63, 0.08);     /* divider above the action row inside tool cards */
  --border-dark:        rgba(255, 255, 255, 0.15);  /* footer bottom divider on navy */
  --border-dark-subtle: rgba(255, 255, 255, 0.12);  /* sticky header bottom edge */
  --border-kelp:        rgba(74, 124, 78, 0.18);    /* step card borders */
  --border-kelp-strong: rgba(74, 124, 78, 0.5);     /* tool card border on hover */
  --border-cream:       rgba(253, 241, 230, 0.45);  /* stat left dividers on coral */

  /* ------------------------------------------------------------
     type, families and weights
     ------------------------------------------------------------ */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* layer 3 addition, not from the locked source. used by code
     in guide posts and licence keys on the account page */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;   /* ceiling. 600 and 700 are banned, they break the editorial feel */

  /* ------------------------------------------------------------
     type scale
     sizes are rem so browser font scaling works. 1rem equals
     16px at default settings, so rendered output matches the
     locked px spec exactly. px noted on every token.
     letter-spacing is per role, verified against source.
     mobile sizes reassign in the 760px block at the bottom.
     ------------------------------------------------------------ */

  /* hero h1, fraunces 500, cream on navy at this size only */
  --fs-hero: 3.75rem;            /* 60px, 38px on mobile */
  --lh-hero: 1.06;
  --ls-hero: -0.025em;

  /* section title h2, fraunces 500 */
  --fs-section-title: 2.625rem;  /* 42px, 30px on mobile */
  --lh-section-title: 1.10;
  --ls-section-title: -0.022em;

  /* closing h2, fraunces 500 */
  --fs-closing: 2.25rem;         /* 36px, 28px on mobile */
  --lh-closing: 1.15;
  --ls-closing: -0.02em;

  /* stats title, fraunces 500 */
  --fs-stats-title: 2rem;        /* 32px, 24px on mobile */
  --lh-stats-title: 1.15;
  --ls-stats-title: -0.02em;

  /* promise quote, fraunces 400 italic */
  --fs-quote: 1.875rem;          /* 30px, 22px on mobile */
  --lh-quote: 1.40;

  /* tool card title, fraunces 500 */
  --fs-card-title: 1.375rem;     /* 22px */
  --lh-card-title: 1.20;
  --ls-card-title: -0.012em;

  /* step title, fraunces 500 */
  --fs-step-title: 1.375rem;     /* 22px */
  --lh-step-title: 1.10;
  --ls-step-title: -0.01em;

  /* step numeral, fraunces 400 italic. step i kelp, ii coral, iii navy */
  --fs-step-numeral: 2.625rem;   /* 42px */
  --lh-solid: 1.00;              /* shared by step numerals, stat numbers, prices */

  /* stat number, fraunces 500, tabular-nums */
  --fs-stat-number: 3rem;        /* 48px, 36px on mobile */
  --ls-stat-number: -0.025em;

  /* tool price, fraunces 500, tabular-nums */
  --fs-price: 1.1875rem;         /* 19px */
  --ls-price: -0.01em;

  /* wordmark, fraunces 500, cream on navy */
  --fs-wordmark: 1.375rem;       /* 22px */
  --ls-wordmark: -0.01em;

  /* footer brand blurb, fraunces 400 italic */
  --fs-footer-blurb: 1.0625rem;  /* 17px */

  /* hero subhead, inter 400 */
  --fs-subhead: 1.125rem;        /* 18px, 16px on mobile */
  --lh-subhead: 1.55;

  /* body, inter 400. spec range is 1.55 to 1.60 */
  --fs-body: 1rem;               /* 16px */
  --fs-body-sm: 0.875rem;        /* 14px, nav links, footer links, card descriptions */
  --fs-body-xs: 0.8125rem;       /* 13px, open links, stat labels, mobile nav */
  --lh-body: 1.6;

  /* eyebrows, inter 500, lowercase, ls 0.16em.
     source runs 11px in light and coral zones, 12px on navy
     after testing. both kept, matching the locked design */
  --fs-eyebrow: 0.75rem;         /* 12px, on navy */
  --fs-eyebrow-light: 0.6875rem; /* 11px, light and coral zones */
  --ls-eyebrow: 0.16em;

  /* generic display tracking, base.css heading default only.
     real components use the per-role tokens above */
  --ls-display: -0.01em;

  /* ------------------------------------------------------------
     layout
     structural spacing stays px to match the locked spec.
     responsive values reassign at the 760px breakpoint below.
     ------------------------------------------------------------ */
  --container-max:    1140px;
  --container-pad-x:  40px;      /* 24px under 760px */
  --section-pad-y:    96px;      /* 64px under 760px */
  --section-pad-y-lg: 112px;     /* 64px under 760px. tools section runs 112px top in source */

  /* section title row, the recurring structural device */
  --title-bar-width:  3px;       /* kelp green left border */
  --title-row-indent: 20px;      /* 14px under 760px */

  /* breakpoint reference only. custom properties cannot be used
     inside media query conditions, hard-code 760px in @media.
     this token exists for js reads */
  --bp-mobile: 760px;

  /* ------------------------------------------------------------
     cards, radii, borders
     ------------------------------------------------------------ */
  --card-pad:      32px 30px 26px;  /* tool cards, 28px 24px 22px under 760px */
  --card-pad-step: 32px 28px;       /* step cards, 24px 22px under 760px */
  --radius-btn:     6px;
  --radius-sm:      8px;
  --radius-card-sm: 10px;
  --radius-card:    12px;        /* step cards */
  --radius-card-lg: 14px;        /* tool cards */
  --border-hairline: 0.5px;      /* true hairline on retina, renders 1px on 1x displays */

  /* ------------------------------------------------------------
     effects, verified against source
     cards carry no shadow at rest, hover only
     ------------------------------------------------------------ */
  --shadow-hover: 0 6px 20px rgba(14, 42, 63, 0.05);
  --focus-ring: 0 0 0 3px rgba(181, 220, 184, 0.5);  /* kelp-bright at 50% */
  --transition-fast: 0.15s ease;  /* nav opacity, button backgrounds, ghost underlines */
  --transition: 0.2s ease;        /* tool cards: border, background, lift, shadow, arrow nudge */
  --header-blur: 8px;             /* backdrop blur behind the sticky header */

  /* ------------------------------------------------------------
     brand thread, the three-stripe rule
     3px tall, bottom edge of the navy hero and top edge of the
     navy footer. stops at 33% and 66%, cream is text-cream,
     both confirmed against source
     ------------------------------------------------------------ */
  --stripe-height: 3px;
  --stripe: linear-gradient(90deg,
      var(--kelp-mid)   0    33%,
      var(--coral)      33%  66%,
      var(--text-cream) 66%  100%);
}

/* responsive token values, from the source 760px block */
@media (max-width: 760px) {
  :root {
    --container-pad-x:  24px;
    --section-pad-y:    64px;
    --section-pad-y-lg: 64px;
    --title-row-indent: 14px;

    --fs-hero:          2.375rem;   /* 38px */
    --fs-section-title: 1.875rem;   /* 30px */
    --fs-stats-title:   1.5rem;     /* 24px */
    --fs-stat-number:   2.25rem;    /* 36px */
    --fs-quote:         1.375rem;   /* 22px */
    --fs-closing:       1.75rem;    /* 28px */
    --fs-subhead:       1rem;       /* 16px */

    --card-pad:      28px 24px 22px;
    --card-pad-step: 24px 22px;
  }
}