/* Hallmark · macrostructure: product-showcase-editorial */
/* Cloudnine Beddings — Design Tokens
 * All raw design values live here. Components reference these tokens.
 */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");

:root,
[data-theme="theme"] {
    color-scheme: light;

    /* —— Brand Colors —— */
    --primary: #0c1f3d;
    --primary-light: #1a3a5c;
    --primary-dark: #071428;
    --accent: #e8752a;
    --accent-light: #f5a04d;
    --accent-warm: #ff8c3a;

    /* —— Semantic Aliases —— */
    --background: #f4f6fa;
    --foreground: #1a1f2e;
    --surface: #ffffff;
    --border: rgba(12, 31, 61, 0.08);

    /* —— Text —— */
    --text: #1a1f2e;
    --text-muted: #5a6478;
    --text-light: #8b93a5;

    /* —— Surfaces —— */
    --bg: #f4f6fa;
    --bg-warm: #eaeef5;
    --bg-card: #ffffff;
    --white: #ffffff;

    /* —— Semantic Colors —— */
    --ring: #e8752a;
    --success: #16a34a;
    --error: #dc2626;
    --warning: #f59e0b;

    /* —— Typography —— */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --text-xs: 0.72rem;
    --text-sm: 0.78rem;
    --text-base: 0.88rem;
    --text-md: 0.9rem;
    --text-lg: 1rem;
    --text-xl: 1.15rem;
    --text-2xl: 1.4rem;
    --text-3xl: 1.6rem;
    --text-4xl: clamp(1.5rem, 3.5vw, 2.2rem);
    --text-hero: clamp(2rem, 5.5vw, 3.8rem);

    /* —— Spacing —— */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 14px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;
    --space-5xl: 72px;

    /* —— Radii —— */
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* —— Shadows —— */
    --shadow-sm: 0 2px 8px rgba(12, 31, 61, 0.06);
    --shadow: 0 4px 20px rgba(12, 31, 61, 0.08);
    --shadow-lg: 0 12px 40px rgba(12, 31, 61, 0.12);

    /* —— Motion —— */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.3s;

    /* —— Focus —— */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration: 0.01ms;
    }
}