/* ══════════════════════════════════════════════════
   WING NOTEBOOKS — Design Tokens (CSS Custom Properties)
   Source of truth for all visual values.
   Phase 2 Design System → Phase 3 Implementation.
   ══════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ── */
    --color-brand-primary: #1C1917;
    --color-brand-primary-light: #44403C;
    --color-brand-secondary: #FAF7F2;
    --color-brand-secondary-dark: #F0EBE3;

    /* ── Accent ── */
    --color-accent: #C2632A;
    --color-accent-hover: #A8531F;
    --color-accent-active: #943E15;
    --color-accent-light: #F0D8C8;

    /* ── Neutrals ── */
    --color-neutral-50: #FAFAF9;
    --color-neutral-100: #F5F5F4;
    --color-neutral-200: #E7E5E4;
    --color-neutral-300: #D6D3D1;
    --color-neutral-400: #A8A29E;
    --color-neutral-500: #78716C;
    --color-neutral-600: #57534E;
    --color-neutral-700: #44403C;
    --color-neutral-800: #292524;
    --color-neutral-900: #1C1917;

    /* ── Semantic ── */
    --color-success: #3D7A4A;
    --color-success-light: #E8F3EA;
    --color-warning: #B8860B;
    --color-warning-light: #FEF3CD;
    --color-error: #B91C1C;
    --color-error-light: #FEE2E2;
    --color-info: #3B6B8A;
    --color-info-light: #E0EEF5;

    /* ── Functional ── */
    --color-background: #FAF7F2;
    --color-surface: #FFFFFF;
    --color-text: #1C1917;
    --color-text-secondary: #57534E;
    --color-text-muted: #A8A29E;
    --color-border: #E7E5E4;
    --color-link: #C2632A;
    --color-link-hover: #A8531F;
    --color-overlay: rgba(28, 25, 23, 0.6);

    /* ── Paper & Stationery Palette ── */
    --color-paper-cream: #FAF7F2;
    --color-paper-ivory: #FDFBF7;
    --color-paper-warm: #F4EDE2;
    --color-paper-kraft: #DFD3BF;
    --color-paper-dark: #221F1D;
    --color-paper-line: rgba(74, 85, 104, 0.15);
    --color-paper-line-dark: rgba(74, 85, 104, 0.28);
    --color-paper-margin: rgba(220, 38, 38, 0.35);
    --color-paper-dot: rgba(74, 85, 104, 0.22);
    --color-ink-blue: #1E3A8A;
    --color-ink-black: #0F172A;
    --color-ink-green: #065F46;
    --color-ink-burgundy: #831843;
    --color-foil-gold: #D4AF37;
    --color-foil-copper: #B87333;
    --color-wax-seal: #991B1B;
    --color-ribbon: #943E15;
    --color-leather-tan: #8B4513;
    --color-linen-olive: #4A5340;

    /* ── Typography ── */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-handwriting: 'Caveat', 'Segoe Print', cursive;

    --type-display: 3.5rem;       /* 56px */
    --type-h1: 2.5rem;            /* 40px */
    --type-h2: 2rem;              /* 32px */
    --type-h3: 1.5rem;            /* 24px */
    --type-h4: 1.25rem;           /* 20px */
    --type-body-large: 1.125rem;  /* 18px */
    --type-body: 1rem;            /* 16px */
    --type-small: 0.875rem;       /* 14px */
    --type-caption: 0.75rem;      /* 12px */
    --type-button: 0.875rem;      /* 14px */
    --type-nav: 0.875rem;         /* 14px */
    --type-price: 1.25rem;        /* 20px */
    --type-price-large: 1.5rem;   /* 24px */

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.6;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ── Border Radius ── */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08);
    --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.12);
    --shadow-xl: 0 16px 36px rgba(28, 25, 23, 0.16);
    --shadow-book-flat: 0 10px 30px -5px rgba(28, 25, 23, 0.18), 0 25px 50px -12px rgba(28, 25, 23, 0.25);
    --shadow-book-spine: inset 24px 0 28px -12px rgba(0, 0, 0, 0.2), inset -24px 0 28px -12px rgba(0, 0, 0, 0.2);
    --shadow-page-curl: 0 14px 28px rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.12);
    --shadow-card-elevated: 0 12px 32px -4px rgba(28, 25, 23, 0.14);

    /* ── Motion ── */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* ── Grid / Layout ── */
    --grid-max-width: 1280px;
    --grid-narrow: 720px;
    --grid-wide: 1440px;
    --grid-gutter: 24px;
    --grid-padding: 16px;

    /* ── Z-Index ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* ── Mobile Type Overrides (default is mobile-first) ── */
@media (min-width: 768px) {
    :root {
        --grid-padding: 24px;
    }
}

@media (min-width: 1024px) {
    :root {
        --grid-padding: 24px;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}