/* ============================================================
   tokens.css — the design system's defaults.

   The palette is monochrome out of the box, but the accent, the two
   surface colours, the text colour and the fonts are all overridden at
   runtime by assets/css/theme.cache.css, which ThemeService writes from
   the Appearance settings. Change the accent there and it repaints the
   front end and the admin panel together.

   Anything defined here that theme.cache.css does not override is
   structural and is meant to stay neutral.
   ============================================================ */

:root {
    /* --- Greyscale ramp ------------------------------------ */
    --c-black: #000000;
    --c-ink: #0A0A0A;          /* page text on light */
    --c-ink-2: #1A1A1A;        /* dark surfaces, top bar, dark bands */
    --c-ink-3: #2B2B2B;        /* dark surface hover */
    --c-grey-700: #3F3F46;     /* strong secondary text */
    --c-grey-600: #52525B;     /* body / secondary text */
    --c-grey-500: #71717A;     /* meta text, captions */
    --c-grey-400: #A1A1AA;     /* disabled text, idle icon */
    --c-grey-300: #C9CACF;     /* strong borders */
    --c-grey-200: #E3E4E8;     /* default border */
    --c-grey-100: #F0F1F3;     /* chips, idle input fill */
    --c-grey-50: #F4F5F7;      /* alternating section background */
    --c-white: #FFFFFF;

    /* --- Semantic ------------------------------------------ */
    --c-bg: var(--c-white);
    --c-bg-alt: var(--c-grey-50);
    --c-bg-invert: var(--c-black);
    --c-text: var(--c-ink);
    --c-text-soft: var(--c-grey-600);
    --c-text-meta: var(--c-grey-500);
    --c-text-invert: var(--c-white);
    --c-border: var(--c-grey-200);
    /* Overridden by theme.cache.css. --c-on-accent is computed from the
       accent's luminance, so a pale accent gets black text rather than
       unreadable white. */
    --c-accent: var(--c-black);
    --c-accent-strong: var(--c-ink-3);    /* accent hover */
    --c-on-accent: var(--c-white);        /* text/icons ON the accent */
    --c-accent-soft: rgba(0, 0, 0, .06);  /* tinted fills */
    --c-accent-line: rgba(0, 0, 0, .24);  /* focus rings */
    --c-accent-invert: var(--c-white);
    --c-heading: var(--c-ink);
    --c-overlay: rgba(0, 0, 0, .72);
    --c-on-dark-soft: rgba(255, 255, 255, .68);
    --c-on-dark-line: rgba(255, 255, 255, .16);

    --c-shadow-xs: 0 1px 2px rgba(16, 18, 27, .04), 0 1px 3px rgba(16, 18, 27, .06);
    --c-shadow-sm: 0 2px 8px rgba(16, 18, 27, .07);
    --c-shadow-md: 0 10px 28px rgba(16, 18, 27, .10);
    --c-shadow-lg: 0 18px 52px rgba(16, 18, 27, .14);
    --c-shadow-modal: 0 32px 80px rgba(16, 18, 27, .28);

    /* Photographs keep their own colours at all times. Hovering eases the
       image up inside its frame, which marks the item the reader is pointing
       at without recolouring it or moving anything around it. */
    --img-filter: saturate(1.02) contrast(1.02);
    --img-zoom: 1;
    --img-zoom-hover: 1.06;

    /* --- Type ---------------------------------------------- */
    /* Both are overridden by theme.cache.css from the Appearance settings. */
    --ff-base: 'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ff-heading: var(--ff-base);

    /* Fluid scale. Endpoints match the specification table:
       display 64→32, h1 48→27, h2 36→23, h3 28→20, h4 24→18,
       h5 20→17, h6 18→16, body 16→15, article 18→16. */
    --fs-display: clamp(32px, 2.34vw + 24.5px, 64px);
    --fs-h1: clamp(27px, 1.54vw + 20.6px, 48px);
    --fs-h2: clamp(23px, 0.95vw + 18.4px, 36px);
    --fs-h3: clamp(20px, 0.59vw + 17.2px, 28px);
    --fs-h4: clamp(18px, 0.44vw + 15.9px, 24px);
    --fs-h5: clamp(17px, 0.22vw + 15.9px, 20px);
    --fs-h6: clamp(16px, 0.15vw + 15.3px, 18px);
    --fs-lead: 18px;
    --fs-body: clamp(15px, 0.07vw + 14.6px, 16px);
    --fs-sm: 14px;
    --fs-xs: 13px;
    --fs-2xs: 11px;
    --fs-article: clamp(16px, 0.15vw + 15.3px, 18px);

    --lh-display: 1.06;
    --lh-h1: 1.12;
    --lh-h2: 1.18;
    --lh-h3: 1.25;
    --lh-h4: 1.3;
    --lh-h5: 1.35;
    --lh-h6: 1.4;
    --lh-lead: 1.7;
    --lh-body: 1.75;
    --lh-article: 1.95;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --ls-display: -0.03em;
    --ls-h1: -0.02em;
    --ls-h2: -0.015em;
    --ls-h3: -0.01em;
    --ls-h4: -0.005em;
    --ls-eyebrow: 0.08em;

    /* --- Radii --------------------------------------------- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;
    --r-circle: 50%;

    /* --- Spacing scale ------------------------------------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 48px;
    --s-10: 56px;
    --s-11: 64px;
    --s-12: 80px;
    --s-13: 96px;
    --s-14: 120px;
    --s-15: 160px;

    /* Section rhythm — overridden per breakpoint in responsive.css */
    --section-pad: 96px;
    --section-head-gap: 40px;
    --grid-gap: 30px;
    --gutter: 24px;

    /* --- Motion -------------------------------------------- */
    --e-out: cubic-bezier(.22, .61, .36, 1);
    --e-in-out: cubic-bezier(.65, .05, .36, 1);
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 420ms;
    --t-image: 600ms;

    /* --- Layers -------------------------------------------- */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 300;
    --z-drawer: 400;
    --z-overlay: 500;
    --z-modal: 600;
    --z-toast: 700;

    /* --- Containers ---------------------------------------- */
    --container: 1320px;
    --container-narrow: 960px;
    --container-reading: 760px;
    --container-wide: 1560px;
}

/* Higher-contrast preference: thicker borders, darker secondary text. */
@media (prefers-contrast: more) {
    :root {
        --c-text-soft: var(--c-grey-700);
        --c-text-meta: var(--c-grey-700);
        --c-border: var(--c-grey-300);
        --border-w: 1.5px;
    }
}