/*
 * 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 =====
       Madeira Diaspora SA: navy and gold from the emblem, on warm ivory, with the
       South Africa / Portugal / Madeira flag colours as accents. */
    /* Brand */
    --color-primary: #163a6b;           /* MDSA navy (emblem ring) */
    --color-primary-dark: #0b1f3f;
    --color-primary-rgb: 22, 58, 107;   /* for rgba() tints + focus rings */
    --color-accent: #e0b84a;            /* emblem gold */

    /* Text */
    --color-heading: #0f2a52;           /* deep navy */
    --color-text: #2d3a4f;              /* body copy */
    --color-text-muted: #66738a;        /* secondary / captions */

    /* Surfaces */
    --color-bg: #faf8f3;                /* warm ivory */
    --color-bg-alt: #f1ece0;            /* parchment — alternating sections */
    --color-surface: #ffffff;          /* cards */
    --color-border: #e3dccb;
    --color-inverse: #ffffff;          /* text on dark/brand backgrounds */
    --color-footer-bg: #0b1f3f;

    /* The three flags: South Africa green, Portugal red, Madeira yellow */
    --flag-green: #007a4d;
    --flag-red: #da291c;
    --flag-yellow: #ffcd00;
    --flag-blue: #1d3f8f;
    --color-gold: #e0b84a;
    --color-gold-dark: #b8912a;
    --color-navy-deep: #0b1f3f;

    /* 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);
}