/* ============================================================
   Milin Display — Design Tokens
   Canonical source of truth. Enqueued site-wide.
   Reference any value via var(--token).
   ============================================================ */
:root {
    /* ---- Canvas / surfaces ---- */
    --canvas: #FAFAFA;
    --canvas-warm: #F5F1E8;
    --canvas-dark: #0A0A0A;
    --surface: #FFFFFF;
    --surface-gray: #EAEAEF;
    --surface-gray-2: #F5F5F7;

    /* ---- Ink (text) — unified, replaces #000/#111/#1D1D1F/#111827 ---- */
    --ink: #111827;
    --ink-2: #6B7280;
    --ink-3: #9CA3AF;

    /* ---- Brand accents — unified, replaces #0066FF/#0066CC mix ---- */
    --accent: #0066FF;
    --accent-hover: #0052CC;
    --accent-teal: #0D7C8E;
    --accent-cyan: #05BFDB;
    --tag-orange: #FF5E00;

    /* ---- Atmosphere glows (body background) ---- */
    --glow-lavender: #E6E6FA;
    --glow-sage: #C9D5B5;

    /* ---- Functional ---- */
    --success: #10B981;
    --success-dark: #059669;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ---- FAQ gray ramp ---- */
    --gray-1: #D1D1D6;
    --gray-2: #DEDEE3;
    --gray-3: #EAEAEF;
    --gray-4: #F2F2F7;
    --gray-5: #F8F8FA;

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-script: 'Kaushan Script', cursive;

    --fs-display: clamp(4.5rem, 6vw, 8rem);
    --fs-h1: clamp(3.5rem, 4vw, 4.5rem);
    --fs-h2: clamp(2rem, 3vw, 2.5rem);
    --fs-h3: 1.4rem;
    --fs-h4: 1.1rem;
    --fs-body: 1.1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;

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

    /* ---- Radius scale ---- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 60px;
    --r-pill: 999px;

    /* ---- Shadow scale ---- */
    --shadow-ambient: 0 4px 20px -2px rgba(26, 26, 26, 0.04);
    --shadow-1: 0 8px 30px -4px rgba(26, 26, 26, 0.08);
    --shadow-2: 0 24px 48px -12px rgba(26, 26, 26, 0.12);
    --glow-inner: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);

    /* ---- Easing ---- */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --container-max: 1440px;
    --container-width: 90%;
    --space-section: 8rem;
    --space-section-mobile: 4rem;

    /* ============================================================
       Legacy aliases — keep existing var(--color-*) references working
       ============================================================ */
    --color-canvas: var(--canvas);
    --color-canvas-shade: var(--canvas-warm);
    --color-ink-primary: var(--ink);
    --color-ink-secondary: var(--ink-2);
    --color-accent-glow: var(--glow-lavender);
    --color-accent-nature: var(--glow-sage);
    --color-highlight: var(--accent);
    --shadow-elevation-1: var(--shadow-1);
    --shadow-elevation-2: var(--shadow-2);
    --h2-item-height: 130px;
    --p-item-height: 56px;
}