/* tokens.css
   Design tokens for REFYNE.

   Sources:
   - Colours: Figma Assets page (LOGO/IKONER/TYPOGRAFI section), confirmed against
     per-frame variable lookups across the 8 inspected page frames.
   - Typography: Figma TYPOGRAFI frame revealed two typefaces — GT Sectra (serif,
     display role) and Instrument Sans (sans, body role). The "Book" labels in
     Figma map to: GT Sectra Book (350 weight), Instrument Sans Regular (400).
   - Spacing/radii/motion: derived from observed values across inspected frames.
*/

:root {
  /* ──────────── Colour palette ────────────────────────────────────
     The brand is a near-monochrome system with green surface colours.
     Names mirror Figma's internal labels so designer/dev share a vocabulary. */

  /* Refyne Brandbook v1, pp. 6–7. Green is a surface/diagram family;
     navigation and calls to action use the neutral inks. */
  --rf-white:        #ffffff;
  --rf-paper:        #f9f7f7;
  --rf-paper-warm:   #f9f7f7;
  --rf-sand-light:   #f4efec;
  --rf-bone:         var(--rf-sand-light);
  --rf-stone:        #e0d9d2;
  --rf-black:        #202020;
  --rf-grey-02:      #252525;
  --rf-ink:          #1e1e1e;
  --rf-pure-black:   #000000;
  --rf-grey-01:      color-mix(in srgb, var(--rf-black) 75%, transparent);
  --rf-green-01:     #a4a682;
  --rf-green-02:     #ccf191;
  --rf-green-03:     #dafb7e;
  --rf-olive:        #727058;
  --rf-green-04:     #4c593f;
  --rf-green-05:     #4c593f;
  --rf-blue:         var(--rf-paper);

  --color-bg:            var(--rf-white);
  --color-bg-soft:       var(--rf-paper);
  --color-bg-warm:       var(--rf-paper-warm);
  --color-bg-stone:      var(--rf-stone);
  --color-bg-invert:     var(--rf-grey-02);
  --color-bg-deep:       var(--rf-green-04);
  --color-text:          var(--rf-black);
  --color-text-soft:     var(--rf-grey-01);
  --color-text-deep:     var(--rf-pure-black);
  --color-text-invert:   var(--rf-white);
  --color-rule:          rgb(0 0 0 / 50%);
  --color-marker:        var(--rf-pure-black);
  --color-accent:        var(--rf-green-03);
  --color-accent-soft:   var(--rf-green-02);
  --color-accent-muted:  var(--rf-green-01);

  /* ──────────── Typography ────────────────────────────────────────
     Two typefaces:
       • GT Sectra (serif) — used as Display for h1–h3 hero/section headlines.
       • Instrument Sans (sans) — used for body, labels, navigation, h4–h6, UI.
     Both are self-hosted; @font-face declarations live in base.css. */
  --font-display: var(--font-serif);
  --font-serif:   'GT Sectra', Georgia, 'Times New Roman', serif;
  --font-sans:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-text:    var(--font-sans);   /* body text is sans */

  --fw-book:     350;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Fluid type scale (mobile → desktop). Desktop peaks reflect Figma values
     (e.g. ~86px H1 on Home, 63px on Resultater hero). */
  --fs-label:      clamp(0.75rem,   0.7rem  + 0.2vw, 0.875rem); /* 12–14 */
  --fs-body-sm:    clamp(0.9375rem, 0.9rem  + 0.2vw, 1rem);     /* 15–16 */
  --fs-body:       clamp(1rem,      0.95rem + 0.3vw, 1.25rem);  /* 16–20 */
  --fs-h6:         clamp(1.125rem,  1rem    + 0.6vw, 1.5rem);   /* 18–24 */
  --fs-h5:         clamp(1.25rem,   1.05rem + 1vw,   1.875rem); /* 20–30 */
  --fs-h4:         clamp(1.5rem,    1.2rem  + 1.5vw, 2.5rem);   /* 24–40 */
  --fs-h3:         clamp(1.875rem,  1.4rem  + 2vw,   3.25rem);  /* 30–52 */
  --fs-h2:         clamp(2.25rem,   1.6rem  + 3vw,   4rem);     /* 36–64 */
  --fs-h1:         clamp(2.75rem,   1.6rem  + 5.5vw, 5.375rem); /* 44–86 */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-loose:   1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* ──────────── Spacing scale ─────────────────────────────────────
     8-pt base. Section paddings/gaps are fluid for desktop reach. */
  --space-0:    0;
  --space-1:    0.25rem;   /*  4 */
  --space-2:    0.5rem;    /*  8 */
  --space-3:    0.75rem;   /* 12 */
  --space-4:    1rem;      /* 16 */
  --space-5:    1.5rem;    /* 24 */
  --space-6:    2rem;      /* 32 */
  --space-7:    2.5rem;    /* 40 */
  --space-8:    3rem;      /* 48 */
  --space-9:    4rem;      /* 64 */
  --space-10:   5rem;      /* 80 */
  --space-11:   6rem;      /* 96 */
  --space-12:   8rem;      /* 128 */

  --section-pad-y: clamp(3rem, 2rem + 6vw, 8rem);   /*  48 → 128 */
  --section-gap:   clamp(4rem, 3rem + 8vw, 12rem);  /*  64 → 192 */

  --gutter:        clamp(1rem, 0.5rem + 2vw, 2.5rem); /* 16 → 40 */
  --container-max: 1920px;

  /* ──────────── Radii ─────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ──────────── Borders ───────────────────────────────────────── */
  --border-hairline: 1px solid var(--color-rule);

  /* ──────────── Motion ────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    240ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;

  /* ──────────── Layout primitives ─────────────────────────────── */
  --bullet-size: 8.52px;   /* the recurring 8.5 × 8.5 section-label square */
  --nav-height:  84px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}