/* ===========================================================
   tokens.css — Design system tokens
   Editorial × Architect — single source of truth for color,
   type, space, motion, layout. All themed via custom properties.
   =========================================================== */

:root {
    /* ---- Type stacks ---- */
    --font-display: 'Fraunces', ui-serif, 'Times New Roman', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* ---- Type scale (responsive via clamp) ---- */
    --text-xs:      clamp(0.6875rem, 0.55vw + 0.55rem, 0.75rem);
    --text-sm:      clamp(0.8125rem, 0.4vw + 0.7rem, 0.875rem);
    --text-base:    clamp(0.9375rem, 0.4vw + 0.84rem, 1rem);
    --text-lg:      clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
    --text-xl:      clamp(1.125rem, 0.7vw + 1rem, 1.375rem);
    --text-2xl:     clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    --text-3xl:     clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem);
    --text-4xl:     clamp(2.25rem, 2.5vw + 1.5rem, 3.5rem);
    --text-5xl:     clamp(2.75rem, 4vw + 1.5rem, 5rem);
    --text-6xl:     clamp(3.25rem, 6vw + 1rem, 7rem);
    --text-7xl:     clamp(4rem, 8vw + 1rem, 9rem);
    --text-display: clamp(4.5rem, 14vw + 1rem, 16rem);

    /* ---- Tracking ---- */
    --ls-display:   -0.045em;
    --ls-tight:     -0.025em;
    --ls-snug:      -0.012em;
    --ls-normal:    0em;
    --ls-wide:      0.04em;
    --ls-wider:     0.08em;
    --ls-mono:      0.015em;

    /* ---- Line height ---- */
    --lh-display:   0.92;
    --lh-tight:     1.08;
    --lh-snug:      1.25;
    --lh-base:      1.6;
    --lh-relaxed:   1.75;

    /* ---- Weight ---- */
    --w-light:      300;
    --w-regular:    400;
    --w-medium:     500;
    --w-semi:       600;
    --w-bold:       700;

    /* ---- Spacing (4px base) ---- */
    --s-0:   0;
    --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;
    --s-11:  10rem;
    --s-12:  14rem;

    /* ---- Layout ---- */
    --container-max:    1280px;
    --container-wide:   1440px;
    --container-narrow: 880px;
    --gutter:           clamp(1.25rem, 4vw, 3rem);
    --section-y:        clamp(4rem, 9vw, 9rem);

    /* ---- Radii ---- */
    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   14px;
    --r-xl:   22px;
    --r-pill: 999px;

    /* ---- Motion ---- */
    --ease-smooth:      cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-emphasized:  cubic-bezier(0.86, 0, 0.07, 1);
    --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
    --dur-instant:      120ms;
    --dur-fast:         220ms;
    --dur-base:         420ms;
    --dur-slow:         680ms;
    --dur-emphasized:   1000ms;

    /* ---- Z-index ---- */
    --z-base:     1;
    --z-rail:     50;
    --z-nav:      90;
    --z-progress: 95;
    --z-cursor:   100;
    --z-skip:     200;
    --z-toast:    300;

    /* ============================================================
       THEME — DARK (default)
       ============================================================ */
    --ink:           #0B0B0F;
    --ink-deep:      #060608;
    --paper:         #F5F4EE;
    --surface:       #131319;
    --surface-elev:  #1A1A22;
    --surface-soft:  #0F0F14;

    --text:          #F5F4EE;
    --text-mute:     #9A9A9F;
    --text-subtle:   #6B6B6F;
    --text-faint:    #4A4A4F;

    --line:          rgba(245, 244, 238, 0.07);
    --line-strong:   rgba(245, 244, 238, 0.14);
    --line-bold:     rgba(245, 244, 238, 0.28);

    --accent:        #F5A524;
    --accent-warm:   #FFB95E;
    --accent-deep:   #C97D0A;
    --accent-soft:   rgba(245, 165, 36, 0.10);
    --accent-glow:   rgba(245, 165, 36, 0.22);

    --bg:            var(--ink);
    --bg-elev:       var(--surface);

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:     0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg:     0 24px 60px rgba(0, 0, 0, 0.55);

    --grid-line:     rgba(245, 244, 238, 0.025);
    --grid-line-2:   rgba(245, 244, 238, 0.05);

    --selection-bg:  rgba(245, 165, 36, 0.32);
    --selection-fg:  #0B0B0F;

    color-scheme: dark;
}

/* ============================================================
   THEME — LIGHT
   ============================================================ */
[data-theme="light"] {
    --ink:           #0B0B0F;
    --ink-deep:      #000000;
    --paper:         #FAF8F2;
    --surface:       #FFFFFF;
    --surface-elev:  #FFFFFF;
    --surface-soft:  #F2F0E8;

    --text:          #0B0B0F;
    --text-mute:     #5A5A60;
    --text-subtle:   #8A8A90;
    --text-faint:    #BFBFC4;

    --line:          rgba(11, 11, 15, 0.08);
    --line-strong:   rgba(11, 11, 15, 0.15);
    --line-bold:     rgba(11, 11, 15, 0.32);

    --accent:        #B16500;
    --accent-warm:   #D88A1A;
    --accent-deep:   #874D00;
    --accent-soft:   rgba(177, 101, 0, 0.08);
    --accent-glow:   rgba(177, 101, 0, 0.18);

    --bg:            var(--paper);
    --bg-elev:       var(--surface);

    --shadow-sm:     0 1px 2px rgba(11, 11, 15, 0.05);
    --shadow-md:     0 8px 32px rgba(11, 11, 15, 0.08);
    --shadow-lg:     0 24px 60px rgba(11, 11, 15, 0.10);

    --grid-line:     rgba(11, 11, 15, 0.03);
    --grid-line-2:   rgba(11, 11, 15, 0.05);

    --selection-bg:  rgba(177, 101, 0, 0.25);
    --selection-fg:  #0B0B0F;

    color-scheme: light;
}

/* Disable on touch / coarse pointers */
@media (hover: none), (pointer: coarse) {
    :root {
        --cursor-display: none;
    }
}