/* ==========================================================================
   DiscountDealsFind – brand fonts + design tokens
   Source: brands/DiscountDealsFind_Brand_Identity (03_Color_Palette, 04_Typography)
   ========================================================================== */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    color-scheme: light dark;

    /* Brand palette (light) */
    --color-primary: #1F3BFF;          /* Find Blue – actions, links */
    --color-primary-hover: #1630E0;
    --color-primary-tint: #E8EBFF;
    --color-on-primary: #FFFFFF;
    --color-secondary: #FF6A2B;        /* Deal Orange – decorative only, ink text */
    --color-accent: #C8F135;           /* Code Lime – codes, verified, CTAs on blue; ink text only */
    --color-accent-hover: #B6E01F;
    --color-ink: #0E1330;              /* always-dark text for lime / orange fills */

    --color-bg: #F6F7FB;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F0F2F8;
    --color-text: #0E1330;
    --color-muted: #555B78;
    --color-border: #E6E8F0;
    --color-border-strong: #D5D8E5;
    --color-tear: #E1E4EE;             /* dashed "ticket" line */
    --color-card-tint: #E6EBFF;        /* soft Find Blue wash on offer cards */
    --color-card-border: #CDD4F0;
    --shadow-card: 0 1px 2px rgba(14, 19, 48, 0.06), 0 6px 16px rgba(31, 59, 255, 0.08);
    --shadow-card-hover: 0 2px 4px rgba(14, 19, 48, 0.08), 0 14px 32px rgba(31, 59, 255, 0.16);

    --color-success: #0B7F44;
    --color-success-bg: #E3F5EB;
    --color-warning: #B25E00;
    --color-sale: #D4380D;             /* % off numbers, white-text badges */

    /* Hero band */
    --hero-bg: #1F3BFF;
    --hero-text: #FFFFFF;
    --hero-text-soft: #E3E7FF;
    --hero-text-muted: #C9D0FF;
    --hero-chip: rgba(255, 255, 255, 0.14);
    --hero-chip-hover: rgba(255, 255, 255, 0.24);

    /* Dark band (newsletter) */
    --band-bg: #0E1330;
    --band-text: #F2F3FA;
    --band-muted: #A3A8C3;
    --band-field: #161A33;
    --band-border: #2B3157;

    /* Typography */
    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Figtree", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.1875rem;
    --fs-h3: 1.375rem;
    --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
    --fs-value: clamp(2rem, 1.7rem + 1vw, 2.5rem);

    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-body: 1.55;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 3rem;
    --space-9: 4.5rem;

    /* Layout */
    --container: 1240px;
    --gutter: 24px;
    --sidebar-width: 320px;
    --layout-gap: 2rem;
    --header-height: 76px;

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(14, 19, 48, 0.06);
    --shadow-md: 0 8px 24px rgba(14, 19, 48, 0.08);
    --shadow-lg: 0 24px 60px rgba(8, 14, 80, 0.35);
    --shadow-panel: 0 18px 48px rgba(14, 19, 48, 0.22);

    --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary);

    --transition-fast: 150ms ease;
    --transition: 220ms ease;

    --z-header: 100;
    --z-dropdown: 200;
    --z-drawer: 1000;
    --z-modal: 1100;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #6E82FF;
        --color-primary-hover: #8A9BFF;
        --color-primary-tint: #232A5C;
        --color-on-primary: #0B0E1F;       /* white on #6E82FF fails AA; ink passes */
        --color-secondary: #FF8550;
        --color-accent: #D4F55A;
        --color-accent-hover: #E0FA7F;

        --color-bg: #0B0E1F;
        --color-surface: #161A33;
        --color-surface-alt: #1D2240;
        --color-text: #F2F3FA;
        --color-muted: #A3A8C3;
        --color-border: #262B4A;
        --color-border-strong: #343A60;
        --color-tear: #2E3456;
        --color-card-tint: #1C2250;
        --color-card-border: #343C70;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
        --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.5);

        --color-success: #3DD68C;
        --color-success-bg: rgba(61, 214, 140, 0.14);
        --color-warning: #FFC14D;
        --color-sale: #FF7A4D;

        --hero-bg: #1A2BB8;
        --band-bg: #161A33;
        --band-field: #0B0E1F;

        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
        --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.5);
    }
}

@media (max-width: 640px) {
    :root {
        --gutter: 16px;
        --header-height: 64px;
    }
}

@media (max-width: 1199.98px) {
    :root {
        --sidebar-width: 280px;
        --layout-gap: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition: 0ms;
    }
}