/**
 * Govee design tokens — single source of truth for the premium dark/blue system.
 * Values derived from govee-body-v3.css / govee-product-view.css / govee-footer.css.
 * Consumed later by storefront pages; this file alone does not restyle anything.
 */

:root {
    /* ------------------------------------------------------------------ */
    /* Color — primary palette (same values as .govee-body-v3 today)      */
    /* ------------------------------------------------------------------ */
    --govee-bg: #07111F;
    --govee-card: #0C1728;
    --govee-card-2: #101D33;
    --govee-border: #1B2A44;
    --govee-text: #F5F7FB;
    --govee-muted: #A9B4C7;
    --govee-cyan: #18C8FF;
    --govee-violet: #7A5CFF;

    /*
     * Color — previously hardcoded extras
     * --govee-bg-deep (#050b14): video block / media--video backgrounds in
     *   govee-body-v3.css; also footer.govee-footer--dark in govee-footer.css
     * --govee-bg-hero (#0a1628): start stop of .govee-body-v3__hero gradient
     * --govee-bg-mid (#0B1A30): mid stop of .govee-double-sp section gradient
     */
    --govee-bg-deep: #050b14;
    --govee-bg-hero: #0a1628;
    --govee-bg-mid: #0B1A30;

    /* ------------------------------------------------------------------ */
    /* Typography — Poppins + previous system stack as fallback           */
    /* Sizes/weights/line-heights taken from govee-body-v3.css roles      */
    /* ------------------------------------------------------------------ */
    --govee-font-sans: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --govee-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --govee-text-eyebrow: 0.7rem;                                      /* .govee-body-v3__eyebrow */
    --govee-text-badge: 0.75rem;                                       /* .govee-body-v3__badge */
    --govee-text-caption: 0.85rem;                                     /* media-card caption body */
    --govee-text-sm: 0.875rem;                                         /* btn, feature-text */
    --govee-text-meta: 0.9rem;                                         /* specs, faq meta */
    --govee-text-section-sub: 0.95rem;                                 /* .govee-body-v3__section-subtitle */
    --govee-text-body: 0.975rem;                                       /* .govee-body-v3__body-text */
    --govee-text-base: 1rem;                                           /* faq-q, panel titles */
    --govee-text-md: 1.125rem;                                         /* double-sp item title */
    --govee-text-lg: 1.25rem;                                          /* larger UI labels */
    --govee-text-icon: 1.5rem;                                         /* .govee-body-v3__feature-icon */
    --govee-text-subtitle: clamp(0.95rem, 1.5vw, 1.1rem);              /* .govee-body-v3__subtitle */
    --govee-text-section: clamp(1.15rem, 2vw, 1.45rem);                /* .govee-body-v3__section-title */
    --govee-text-title: clamp(1.5rem, 3vw, 2.5rem);                    /* .govee-body-v3__title */
    --govee-text-display: clamp(1.75rem, 4vw, 2.625rem);               /* full-overlay titles */

    --govee-weight-regular: 400;
    --govee-weight-medium: 500;
    --govee-weight-semibold: 600;
    --govee-weight-bold: 700;

    --govee-leading-none: 1;
    --govee-leading-tight: 1.15;                                       /* titles */
    --govee-leading-snug: 1.4;                                         /* faq-q */
    --govee-leading-normal: 1.45;                                      /* overlay copy */
    --govee-leading-relaxed: 1.5;                                      /* captions */
    --govee-leading-body: 1.6;                                         /* root .govee-body-v3 */
    --govee-leading-loose: 1.65;                                       /* .govee-body-v3__body-text */

    --govee-tracking-display: -0.02em;                                 /* title / overlay */
    --govee-tracking-heading: -0.01em;                                 /* section-title */
    --govee-tracking-label: 0.04em;                                    /* compact labels */
    --govee-tracking-wide: 0.08em;                                     /* small uppercase */
    --govee-tracking-eyebrow: 0.2em;                                   /* .govee-body-v3__eyebrow */

    /* ------------------------------------------------------------------ */
    /* Spacing — gaps / block margins already used in govee-body-v3.css   */
    /* ------------------------------------------------------------------ */
    --govee-space-1: 0.25rem;
    --govee-space-2: 0.35rem;
    --govee-space-3: 0.5rem;
    --govee-space-4: 0.75rem;
    --govee-space-5: 0.85rem;
    --govee-space-6: 1rem;
    --govee-space-7: 1.25rem;
    --govee-space-8: 1.5rem;
    --govee-space-9: 1.75rem;
    --govee-space-10: 2rem;
    --govee-space-11: 2.5rem;
    --govee-space-12: 3.5rem;                                          /* .govee-body-v3 vertical margin */

    /* ------------------------------------------------------------------ */
    /* Radii — from govee-body-v3.css                                     */
    /* ------------------------------------------------------------------ */
    --govee-radius-none: 0;
    --govee-radius-hairline: 1px;                                      /* compare divider */
    --govee-radius-xs: 2px;                                            /* feature accent */
    --govee-radius-sm: 0.25rem;                                        /* code / chips */
    --govee-radius-md: 0.75rem;                                        /* mobile cards */
    --govee-radius-lg: 1rem;                                           /* media, panels */
    --govee-radius-xl: 1.25rem;                                        /* full-width media, video */
    --govee-radius-2xl: 1.5rem;                                        /* hero */
    --govee-radius-card: 16px;                                         /* image-compare / panels */
    --govee-radius-panel: 18px;                                        /* scroll-cutout */
    --govee-radius-block: 20px;                                        /* .govee-double-sp */
    --govee-radius-pill: 999px;                                        /* badges, buttons, handle */

    /* ------------------------------------------------------------------ */
    /* Shadows — from govee-body-v3.css                                   */
    /* ------------------------------------------------------------------ */
    --govee-shadow-focus: 0 0 0 3px rgba(24, 200, 255, 0.45);          /* image-compare focus ring */
    --govee-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);           /* compare handle */

    /* ------------------------------------------------------------------ */
    /* Layout — .govee-body-v3__inner                                     */
    /* ------------------------------------------------------------------ */
    --govee-container-max: 1280px;
    --govee-container-pad: 1.25rem;                                    /* default */
    --govee-container-pad-md: 2.5rem;                                  /* >= 768px */
    --govee-container-pad-lg: 3.75rem;                                 /* >= 1180px */
}