/* =========================================================
   FOUNDAM FRAMEWORK v0.1
   DESIGN TOKENS
   ========================================================= */

:root {

    /* =====================================================
       COLOUR
       ===================================================== */

    /* Brand */
    --fm-color-lime: #b7ff4a;

    /* Surfaces */
    --fm-color-bg: #f3f1ec;
    --fm-color-bg-alt: #ebe8e1;
    --fm-color-surface: #f8f7f3;

    /* Dark surfaces */
    --fm-color-dark: #161816;
    --fm-color-dark-soft: #242624;

    /* Text */
    --fm-color-ink: #171717;
    --fm-color-text: #30302e;
    --fm-color-muted: #686864;
    --fm-color-subtle: #92918b;

    /* Borders */
    --fm-color-line: #d4d0c7;
    --fm-color-line-dark: #383b38;

    /* Text on dark */
    --fm-color-on-dark: #f8f7f3;
    --fm-color-on-dark-muted: #aaaea8;


    /* =====================================================
       TYPOGRAPHY — FONT FAMILIES
       ===================================================== */

    --fm-font-sans:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --fm-font-serif:
        "Instrument Serif",
        Georgia,
        "Times New Roman",
        serif;


    /* =====================================================
       TYPOGRAPHY — WEIGHTS
       ===================================================== */

    --fm-weight-regular: 400;
    --fm-weight-medium: 500;
    --fm-weight-semibold: 600;
    --fm-weight-bold: 700;


    /* =====================================================
       TYPOGRAPHY — SCALE
       ===================================================== */

    --fm-text-xs: 0.75rem;       /* 12px */
    --fm-text-sm: 0.875rem;      /* 14px */
    --fm-text-base: 1.0625rem;   /* 17px */
    --fm-text-lg: 1.25rem;       /* 20px */

    --fm-text-h3:
        clamp(1.75rem, 2.7vw, 2.5rem);

    --fm-text-h2:
        clamp(2.625rem, 5vw, 4.25rem);

    --fm-text-h1:
        clamp(3.5rem, 6.5vw, 6.25rem);

    --fm-text-display:
        clamp(4rem, 8vw, 7.5rem);


    /* =====================================================
       TYPOGRAPHY — LINE HEIGHT
       ===================================================== */

    --fm-leading-tight: 0.92;
    --fm-leading-heading: 1.02;
    --fm-leading-body: 1.65;
    --fm-leading-loose: 1.75;


    /* =====================================================
       TYPOGRAPHY — LETTER SPACING
       ===================================================== */

    --fm-tracking-display: -0.06em;
    --fm-tracking-heading: -0.04em;
    --fm-tracking-body: -0.01em;

    --fm-tracking-label: 0.12em;
    --fm-tracking-wide: 0.16em;


    /* =====================================================
       SPACING SCALE
       Base system: multiples of 4 / 8
       ===================================================== */

    --fm-space-1: 0.25rem;   /* 4px */
    --fm-space-2: 0.5rem;    /* 8px */
    --fm-space-3: 0.75rem;   /* 12px */
    --fm-space-4: 1rem;      /* 16px */
    --fm-space-5: 1.5rem;    /* 24px */
    --fm-space-6: 2rem;      /* 32px */
    --fm-space-7: 3rem;      /* 48px */
    --fm-space-8: 4rem;      /* 64px */
    --fm-space-9: 5rem;      /* 80px */
    --fm-space-10: 6rem;     /* 96px */
    --fm-space-11: 7.5rem;   /* 120px */
    --fm-space-12: 10rem;    /* 160px */


    /* =====================================================
       SEMANTIC SPACING
       ===================================================== */

    --fm-space-section:
        clamp(4.5rem, 8vw, 7.5rem);

    --fm-space-section-large:
        clamp(5.5rem, 10vw, 10rem);

    --fm-space-section-small:
        clamp(3rem, 6vw, 5rem);

    --fm-space-stack:
        clamp(1.5rem, 3vw, 2.5rem);

    --fm-space-grid:
        clamp(2rem, 5vw, 5rem);

    --fm-space-gutter:
        clamp(1.125rem, 3vw, 1.5rem);


    /* =====================================================
       CONTAINERS
       ===================================================== */

    /* Long-form reading */
    --fm-container-reading: 760px;

    /* Standard page content */
    --fm-container-content: 1040px;

    /* Default FoundaM page grid */
    --fm-container-wide: 1240px;

    /* Art-directed / wide layouts */
    --fm-container-max: 1440px;


    /* =====================================================
       BORDERS
       ===================================================== */

    --fm-border-thin: 1px;
    --fm-border-strong: 2px;

    --fm-border-default:
        var(--fm-border-thin)
        solid
        var(--fm-color-line);

    --fm-border-dark:
        var(--fm-border-thin)
        solid
        var(--fm-color-line-dark);

    --fm-border-accent:
        var(--fm-border-strong)
        solid
        var(--fm-color-lime);


    /* =====================================================
       RADII
       FoundaM remains deliberately sharp.
       ===================================================== */

    --fm-radius-none: 0;
    --fm-radius-xs: 2px;
    --fm-radius-sm: 4px;
    --fm-radius-md: 8px;

    /* Only for pills / circular controls */
    --fm-radius-full: 999px;
}