/* ==========================================================================
   Horizon Global Strategies — Design Tokens
   Palette drawn from West African textile and earth tones:
   laterite clay, savanna ochre, forest canopy, raw ivory.
   ========================================================================== */

:root {
    /* --- Surface ------------------------------------------------------- */
    --c-bone: #faf6ef;
    --c-sand: #f1e9dc;
    --c-linen: #e6dbc9;
    --c-white: #ffffff;

    /* --- Earth --------------------------------------------------------- */
    --c-clay: #a63d17;
    --c-clay-deep: #78290f;
    --c-clay-tint: #f6e3d9;

    /* --- Canopy -------------------------------------------------------- */
    --c-forest: #1d4b3c;
    --c-forest-deep: #103026;
    --c-forest-tint: #dfeae4;

    /* --- Sun ----------------------------------------------------------- */
    --c-ochre: #c8871b;
    --c-ochre-soft: #e0aa4d;

    /* --- Ink ----------------------------------------------------------- */
    --c-ink: #1f1b18;
    --c-ink-70: #524a43;
    --c-ink-45: #8a8078;
    --c-ink-20: #cfc6ba;

    /* --- Semantic ------------------------------------------------------ */
    --c-page: var(--c-bone);
    --c-surface: var(--c-white);
    --c-text: var(--c-ink);
    --c-text-soft: var(--c-ink-70);
    --c-text-faint: var(--c-ink-45);
    --c-rule: var(--c-linen);
    --c-accent: var(--c-clay);
    --c-accent-alt: var(--c-forest);

    /* --- Type ---------------------------------------------------------- */
    --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-body: "Newsreader", Georgia, "Times New Roman", serif;
    --f-mono: ui-monospace, "SF Mono", Menlo, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --fs-4xl: 4rem;
    --fs-5xl: 5.5rem;

    --lh-tight: 1.05;
    --lh-snug: 1.25;
    --lh-normal: 1.6;
    --lh-loose: 1.8;

    --tr-wide: 0.08em;
    --tr-wider: 0.16em;

    /* --- Space --------------------------------------------------------- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;

    /* --- Structure ----------------------------------------------------- */
    --shell: 1240px;
    --shell-narrow: 780px;
    --gutter: 2rem;
    --rail: 88px;

    /* --- Motion -------------------------------------------------------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 700ms;

    /* --- Depth --------------------------------------------------------- */
    --lift-1: 0 1px 2px rgba(31, 27, 24, 0.05);
    --lift-2: 0 4px 16px rgba(31, 27, 24, 0.07);
    --lift-3: 0 16px 48px rgba(31, 27, 24, 0.11);
}

@media (max-width: 900px) {
    :root {
        --fs-3xl: 2.25rem;
        --fs-4xl: 2.75rem;
        --fs-5xl: 3.25rem;
        --gutter: 1.25rem;
        --rail: 0px;
        --s-9: 4rem;
        --s-10: 5rem;
    }
}