/* ============================================================
   Fjord — design system tokens
   v0.1 · 2026-05-04 · Swiss aesthetic with attitude
   Drop this file into any page; everything else builds on it.
   ============================================================ */

@import url('https://fonts.bunny.net/css?family=archivo:400,500,600,700,800,900');
@import url('https://fonts.bunny.net/css?family=space-grotesk:400,500,700');
@import url('https://fonts.bunny.net/css?family=ibm-plex-mono:400,500,700');

:root {
    /* ----- families ----- */
    --font-display: "Archivo",       system-ui, sans-serif;
    --font-body:    "Space Grotesk", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

    /* ----- type scale (base 16, ratio 1.383) ----- */
    --fs-base: 16px;
    --fs-xs:   8.4px;
    --fs-sm:   11.6px;
    --fs-md:   16px;
    --fs-lg:   22.1px;
    --fs-xl:   30.6px;
    --fs-2xl:  42.3px;
    --fs-3xl:  58.5px;
    --fs-disp: 81px;

    /* ----- leading ----- */
    --lh-tight: 0.95;
    --lh-snug:  1.15;
    --lh-body:  1.55;

    /* ----- tracking ----- */
    --tr-display: -0.035em;
    --tr-body:    0em;
    --tr-caption: 0.12em;

    /* ----- weights ----- */
    --wt-display: 800;
    --wt-body:    400;
    --wt-strong:  700;

    /* ----- spacing ----- */
    --sp:    8px;
    --sp-1:  calc(var(--sp) * 1);
    --sp-2:  calc(var(--sp) * 2);
    --sp-3:  calc(var(--sp) * 3);
    --sp-4:  calc(var(--sp) * 4);
    --sp-6:  calc(var(--sp) * 6);
    --sp-8:  calc(var(--sp) * 8);
    --sp-12: calc(var(--sp) * 12);

    /* ----- rules & radius ----- */
    --rule:       2px;
    --rule-thick: 12px;
    --radius:     0px;

    /* ----- palette ----- */
    --bg:         #f1ece1;
    --surface:    #e6dfcd;
    --ink:        #16130f;
    --muted:      #6e6555;
    --accent:     #ff4314;
    --accent-ink: #ffffff;
}