/* ============================================================
   TOKENS.CSS – Design Tokens för färger, spacing, typografi m.m.
   ============================================================ */

/* -------------------------
   Färgpalett (från designmallen)
   ------------------------- */
:root {
    --color-stone: hsl(50, 12%, 80%);     /* "Sand" – primär ljus beige/grön ton (#D1CDC2) */
    --color-linen: hsl(33, 28%, 92%);     /* "Linen/Ivory" – mjuk ljus bakgrund (#F1ECE6) */
    --color-mocha: hsl(16, 25%, 19%);     /* "Mocha" – brödtext, varm mörkbrun (#3E2B24) */
    --color-brown: hsl(23, 33%, 43%)      /* "Brown" – Bakgrunder, knappar, ljusbrun (#926549) */;
    --color-forest: hsl(95, 25%, 17%);    /* "Forest" – rubriker, djupgrön (#2B351F) */
    --color-green: hsl(151, 34%, 23%);    /* "Green" – detaljer, blågrön (#264D3A) */
    --color-link-blue: hsl(226, 42%, 46%);/* "Link Blue" – länkar (#445BA7) */
    --color-link-blue-50: hsla(226, 42%, 46%, 0.15);/* "Link Blue" – länkar (#445BA7) */
    --color-lightblue: hsl(211, 96%, 91%);/* "Light Blue" – detaljer (#D1E7FE) */
    --color-lightblue-50: rgba(210, 231, 254, 0.5);/* "Light Blue" – bakgrundsfärg ihop med mönster (#D2e7FE80) */
    --color-on-dark: hsl(30, 31%, 92%);   /* "Linen/Ivory" används som text på mörka bakgrunder (#F1ECE6) */
    --color-black: hsl(0, 0%, 0%);         /* Ren svart */
    --color-white: hsl(0, 0%, 100%);       /* Ren vit */

    /* Härledd färg */
    --color-mocha-muted: color-mix(in srgb, var(--color-mocha), transparent 40%);
}

/* -------------------------
   Typografi (storlekar)
   ------------------------- */
:root {
    --font-size-base: 1rem;       /* 16px standard */
    --font-size-sm: 0.875rem;     /* 14px mindre text */
    --font-size-lg: 1.125rem;     /* 18px större text */
    --font-size-xl: 1.5rem;       /* 24px mellanrubrik */
    --font-size-xxl: 2.25rem;     /* 36px stor rubrik */
    --font-size-xxxl: 3rem;       /* 48px hero-rubrik */
}

/* -------------------------
   Spacing (marginaler/padding)
   ------------------------- */
:root {
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 4rem;      /* 64px */
}
:root {
    /* Typography – font families */
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --fw-sans-light: 300;
    --fw-sans-regular: 400;
    --fw-sans-medium: 500;
    --fw-sans-semibold: 600;
    --fw-sans-bold: 700;
    --fw-serif-regular: 400;
    --font-heading: var(--font-sans);
    --font-subheading: var(--font-serif);
    --font-body: var(--font-sans);
}
:root {
    /* Type scale (responsive clamps) */
    --fs-900: clamp(2.5rem, 2rem + 2vw, 3.5rem);        /* H1 ~40–56px */
    --fs-800: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);      /* H2 ~32–40px */
    --fs-700: clamp(1.75rem, 1.4rem + 1.2vw, 2rem);     /* H3 ~28–32px */
    --fs-600: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);     /* H4 ~24–28px */
    --fs-500: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);     /* H5 ~20–24px */
    --fs-400: clamp(1.125rem, 0.9rem + 0.5vw, 1.25rem); /* H6 ~18–20px */
    --fs-300: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);    /* Body ~16–18px */
    --fs-200: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem);/* Small text ~14–15px */
    --fs-100: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); /* ~12–13px */
}
@media (max-width: 849px) {
    :root {
        --fs-900: 2rem;
        --fs-800: 1.75rem;
        --fs-700: 1.5rem;
        --fs-600: 1.25rem;
        --fs-500: 1.125rem;
        --fs-400: 1rem;
        --fs-300: 0.9375rem;
        --fs-200: 0.8125rem;
        --fs-100: 0.75rem;
    }
}
:root {

    /* Line heights */
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.55;

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-8: 3rem;
    --sp-10: 4rem;
    --sp-20: 8rem;
    --spacing-xs: var(--sp-2);
    --spacing-sm: var(--sp-4);
    --spacing-md: var(--sp-6);
    --spacing-lg: var(--sp-8);

    /* Radii & Shadows */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.12);
}

:root {
    /* -------------------------
     UI-färger för knappar, states m.m.
     ------------------------- */
    --color-primary: var(--color-forest);  /* Primär – huvudknappar, CTA */
    --color-primary-hover: hsl(95, 25%, 22%); /* Mörkare variant av forest */
    --color-primary-text: var(--color-on-dark);

    --color-secondary: var(--color-stone);  /* Sekundär – alternativa knappar */
    --color-secondary-hover: hsl(50, 12%, 75%);
    --color-secondary-text: var(--color-mocha);

    --color-accent: var(--color-link-blue);  /* Accent – länkar, markeringar */
    --color-accent-hover: hsl(226, 42%, 38%);
    --color-accent-text: var(--color-on-dark);

    /* Feedback-färger */
    --color-success: hsl(142, 40%, 35%);    /* Grön – lyckade states (#2f855a ungefär) */
    --color-success-text: hsl(0, 0%, 100%);

    --color-warning: hsl(38, 92%, 50%);     /* Gul/orange (#f6ad55 ungefär) */
    --color-warning-text: hsl(20, 30%, 20%);

    --color-error: hsl(0, 65%, 47%);        /* Röd (#e53e3e ungefär) */
    --color-error-text: hsl(0, 0%, 100%);
}

:root {
    --btn-size: 16px;
}