/*
 * tokens.css — THE theme file. The single surface for theming a site.
 *
 * Every component reads these custom properties, so re-theming a whole site
 * (or tweaking one per client) means editing values here and nothing else.
 * Grouped by: colour, typography, spacing, radius, shadow, layout, motion.
 */

:root {
    /* ===== Colour =====
       Default aesthetic: warm "paper" editorial with a clay accent. Swap these
       per site for an instant re-skin. */
    /* Brand — United Glass Blowers: black + brand yellow (#ffff00), done accessibly.
       Pure yellow can't be readable as link/button TEXT on white, so structure is
       charcoal and the yellow lives on buttons/accents with black text. */
    --color-primary: #17191d;           /* charcoal — links, structure */
    --color-primary-dark: #000000;
    --color-primary-rgb: 23, 25, 29;    /* focus ring */
    --color-accent: #ffd400;            /* brand yellow accent (ticks, highlights) */

    /* Buttons — brand yellow with black text (high contrast, on-brand). */
    --color-btn: #ffd400;
    --color-btn-text: #17191d;
    --color-btn-hover: #ffe24d;
    /* CTA-band button (on the dark band) — keep it brand yellow, not white. */
    --color-cta-btn: #ffd400;
    --color-cta-btn-text: #17191d;
    --color-cta-btn-hover: #ffe24d;

    /* Text */
    --color-heading: #17191d;           /* near-black */
    --color-text: #3a3d42;              /* body copy */
    --color-text-muted: #767a80;        /* secondary / captions */

    /* Surfaces */
    --color-bg: #ffffff;
    --color-bg-alt: #f4f4f5;            /* alternating sections */
    --color-surface: #ffffff;          /* cards */
    --color-border: #e4e4e7;
    --color-inverse: #ffffff;          /* text on dark backgrounds */
    --color-footer-bg: #17191d;        /* charcoal */

    /* Feedback */
    --color-success-bg: #ecfdf5;
    --color-success-border: #10b981;
    --color-error-bg: #fef2f2;
    --color-error-border: #ef4444;

    /* Focus ring (a11y) */
    --ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35);

    /* ===== Typography =====
       Distinctive pairing: Fraunces (display serif) + Hanken Grotesk (body).
       Loaded in base.twig; swap the font link + these two tokens to re-skin type. */
    --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

    --font-size-base: 1.0625rem;        /* 17px */
    --line-height-base: 1.7;
    --leading-tight: 1.1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --tracking-tight: -0.015em;         /* headings */

    /* Modular type scale */
    --text-sm: 0.9rem;
    --text-lg: 1.2rem;
    --text-xl: clamp(1.35rem, 2.5vw, 1.6rem);
    --text-2xl: clamp(1.75rem, 3.5vw, 2.25rem);
    --text-3xl: clamp(2.25rem, 5vw, 3.25rem);

    /* ===== Spacing ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --section-pad: clamp(3.5rem, 8vw, 6rem);   /* vertical rhythm for sections */

    /* ===== Radius ===== */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ===== Shadow (layered, soft) ===== */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14);

    /* ===== Layout ===== */
    --container-max: 1140px;
    --container-pad: 1.5rem;
    --content-measure: 68ch;            /* readable text width */

    /* Content alignment — change these TWO values to re-align the WHOLE site.
       Centred:      --align-headings: center; --content-justify: auto;
       Left-aligned: --align-headings: left;   --content-justify: 0;            */
    --align-headings: left;
    --content-justify: 0;               /* auto = centred column, 0 = left-aligned */

    /* ===== Motion ===== */
    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}