/* Design tokens — "Editorial Tropics".
 *
 * One palette, one type system, used everywhere. Edit here, not elsewhere.
 * Aesthetic: warm ivory paper, deep ink, turmeric accent, restrained.
 */

:root {
    /* ── Colour ─────────────────────────────────────────────────────── */
    --paper:        #F5F1E8;   /* page background, like newsprint cream */
    --paper-2:      #EDE7D7;
    --surface:      #FFFFFF;   /* cards, panels */
    --surface-mut:  #FAF7EE;
    --ink:          #1A1612;   /* primary text — soft black */
    --ink-2:        #2C2620;
    --muted:        #6B635A;   /* secondary text */
    --hair:         #E0D8C5;   /* borders */
    --hair-2:       #D2C8AE;

    --accent:       #A0651A;   /* turmeric / saffron — primary accent */
    --accent-2:     #C77F23;
    --accent-soft:  #F1E4CB;
    --accent-ink:   #5C3B0F;

    --forest:       #2C3F33;   /* secondary accent — Malaysian tropics */
    --forest-soft:  #E2E7DE;

    --danger:       #922B27;
    --danger-soft:  #F0D4D2;
    --success:      #2C5530;
    --success-soft: #D9E5D5;
    --warning:      #C57C0A;
    --warning-soft: #F6E5C1;

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-display: "Fraunces", "Times New Roman", serif;
    --font-body:    "Manrope", -apple-system, "Helvetica Neue", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    /* Type scale — modular, gentle ramp */
    --t-xs:   11px;
    --t-sm:   13px;
    --t-base: 15px;
    --t-lg:   17px;
    --t-xl:   20px;
    --t-2xl:  26px;
    --t-3xl:  34px;
    --t-4xl:  48px;

    /* Leading & letter-spacing */
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-normal: 1.55;
    --tracking-label: 0.14em;
    --tracking-tight: -0.02em;

    /* ── Layout ─────────────────────────────────────────────────────── */
    --rad-xs:  4px;
    --rad-sm:  6px;
    --rad-md:  10px;
    --rad-lg:  16px;

    --sp-0:  0;
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;

    --shadow-1: 0 1px 0 rgba(26, 22, 18, 0.04),
                0 1px 2px rgba(26, 22, 18, 0.06);
    --shadow-2: 0 2px 4px rgba(26, 22, 18, 0.05),
                0 8px 24px rgba(26, 22, 18, 0.08);
    --shadow-3: 0 20px 50px rgba(26, 22, 18, 0.18);

    --sidebar-w: 248px;
    --topbar-h:  64px;

    --easing-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --easing-in:   cubic-bezier(0.7, 0, 0.84, 0);
    --duration-1:  140ms;
    --duration-2:  280ms;
    --duration-3:  500ms;
}