/* =========================================================
   Cioclovina Tribe — design tokens
   Single source of truth for colour, type, space, motion.
   ========================================================= */

:root {
    /* ---- brand colour ---- */
    --ct-forest-deep: #10251B;
    --ct-forest-dark: #071610;
    --ct-green: #385F27;
    --ct-green-bright: #72A944;
    --ct-green-soft: #A7C98A;
    --ct-cream: #F4F0E7;
    --ct-off-white: #FAF8F3;
    --ct-brown: #876047;
    --ct-terracotta: #A96845;
    --ct-gold: #C2A15A;

    /* ---- semantic ---- */
    --ct-bg: var(--ct-off-white);
    --ct-bg-alt: var(--ct-cream);
    --ct-bg-dark: var(--ct-forest-deep);
    --ct-ink: #16211A;
    --ct-ink-soft: #4A5750;
    --ct-ink-invert: var(--ct-off-white);
    --ct-ink-invert-soft: rgba(250, 248, 243, .72);
    --ct-line: rgba(22, 33, 26, .14);
    --ct-line-invert: rgba(250, 248, 243, .18);
    --ct-accent: var(--ct-green-bright);
    --ct-focus: #C2A15A;

    /* ---- typography ---- */
    --ct-font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --ct-font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ct-font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;

    --ct-text-xs: .75rem;      /* 12 */
    --ct-text-sm: .8125rem;    /* 13 */
    --ct-text-base: 1rem;      /* 16 */
    --ct-text-md: 1.0625rem;   /* 17 */
    --ct-text-lg: 1.25rem;     /* 20 */

    /* fluid display sizes */
    --ct-display-1: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);
    --ct-display-2: clamp(2.1rem, 1.35rem + 3vw, 4rem);
    --ct-display-3: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
    --ct-display-4: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);

    --ct-eyebrow-size: .75rem;
    --ct-eyebrow-track: .22em;

    --ct-leading-tight: 1.04;
    --ct-leading-snug: 1.2;
    --ct-leading-body: 1.68;

    /* ---- spacing scale ---- */
    --ct-space-xs: .5rem;
    --ct-space-sm: .875rem;
    --ct-space-md: 1.5rem;
    --ct-space-lg: 2.5rem;
    --ct-space-xl: 4rem;
    --ct-space-2xl: 6rem;
    --ct-space-3xl: 9rem;

    --ct-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

    /* ---- layout ---- */
    --ct-container: 1240px;
    --ct-container-wide: 1440px;
    --ct-container-narrow: 760px;
    --ct-gutter: clamp(1.25rem, .6rem + 2.4vw, 3rem);

    /* Distance from a container's content edge out to the viewport edge.
       Used for full-bleed media; sections clip the scrollbar overshoot. */
    --ct-bleed: calc((100vw - min(100vw, var(--ct-container))) / 2 + var(--ct-gutter));
    --ct-bleed-wide: calc((100vw - min(100vw, var(--ct-container-wide))) / 2 + var(--ct-gutter));

    /* ---- radius ---- */
    --ct-radius-xs: 4px;
    --ct-radius-sm: 8px;
    --ct-radius-md: 14px;
    --ct-radius-lg: 26px;
    --ct-radius-pill: 999px;
    --ct-radius-organic: 180px 24px 180px 24px;

    /* ---- elevation (restrained) ---- */
    --ct-shadow-sm: 0 1px 2px rgba(7, 22, 16, .06), 0 4px 14px rgba(7, 22, 16, .05);
    --ct-shadow-md: 0 12px 40px rgba(7, 22, 16, .12);
    --ct-shadow-card: 0 18px 50px rgba(7, 22, 16, .16);

    /* ---- motion ---- */
    --ct-ease: cubic-bezier(.22, .61, .36, 1);
    --ct-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ct-t-fast: 180ms;
    --ct-t-base: 320ms;
    --ct-t-slow: 700ms;
    --ct-t-image: 1200ms;

    /* ---- z ---- */
    --ct-z-header: 100;
    --ct-z-drawer: 120;
    --ct-z-sticky-cta: 90;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ct-t-fast: 1ms;
        --ct-t-base: 1ms;
        --ct-t-slow: 1ms;
        --ct-t-image: 1ms;
    }
}