/* ==========================================================================
   thesaviercode – brand fonts + design tokens
   Values follow the "website mockups" design (desktop 1440 / mobile 390).
   ========================================================================== */

@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: "DM Sans"; src: url("../fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; 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;

    /* Brand */
    --color-primary: #3B3CEE;          /* indigo – buttons, links, "code" */
    --color-primary-hover: #2D2ED6;
    --color-primary-tint: #ECECFF;     /* icon tiles */
    --color-on-primary: #FFFFFF;
    --color-accent: #C3F532;           /* lime – headline, subscribe, "new" */
    --color-accent-hover: #B2E61F;
    --color-ink: #0E1330;              /* navy – text, hero, footer */

    --color-bg: #F7F6FB;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F1F7;
    --color-text: #0E1330;
    --color-muted: #5B6079;
    --color-border: #E7E7F0;
    --color-border-strong: #D9DAE6;

    /* Dashed code box */
    --code-bg: #F0F0FF;
    --code-border: #6F70F2;
    --code-text: #3B3CEE;
    --code-dots: #B9B9F5;

    /* Status badges */
    --badge-verified-bg: #DFF6EC;  --badge-verified: #0F7A4A;
    --badge-soon-bg: #FFEFD7;      --badge-soon: #A3520A;
    --badge-hot-bg: #FFE5E3;       --badge-hot: #C2281F;
    --badge-new-bg: #C3F532;       --badge-new: #0E1330;
    --badge-excl-bg: #0E1330;      --badge-excl: #C3F532;

    --color-success: #0F7A4A;
    --color-success-bg: #DFF6EC;
    --color-warning: #A3520A;
    --color-sale: #C2281F;

    /* Navy bands (hero, term hero, footer) */
    --hero-bg: #0E1330;
    --hero-text: #FFFFFF;
    --hero-text-soft: #C9CCDF;
    --hero-text-muted: #9EA3BE;
    --hero-chip: #1B2140;
    --hero-chip-border: #2F3555;
    --hero-chip-hover: #262D50;

    --footer-bg: #0E1330;
    --footer-text: #FFFFFF;
    --footer-link: #B4B9D2;
    --footer-muted: #8A8FAB;
    --footer-line: #262B48;

    /* Newsletter band */
    --band-bg: #3B3CEE;
    --band-text: #FFFFFF;
    --band-muted: #D9DAFF;

    /* Typography */
    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "DM Sans", -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.25rem;
    --fs-h3: 1.375rem;
    --fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-h1: clamp(3rem, 1.6rem + 5.4vw, 6rem);
    --fs-value: clamp(2rem, 1.7rem + 1vw, 2.375rem);

    --lh-tight: 0.98;
    --lh-heading: 1.1;
    --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: 1344px;
    --gutter: 48px;
    --sidebar-width: 320px;
    --layout-gap: 2rem;
    --header-height: 88px;

    /* 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.05);
    --shadow-card: 0 1px 2px rgba(14, 19, 48, 0.04), 0 12px 32px -18px rgba(14, 19, 48, 0.22);
    --shadow-card-hover: 0 2px 4px rgba(14, 19, 48, 0.06), 0 20px 40px -18px rgba(59, 60, 238, 0.35);
    --shadow-md: 0 10px 30px -12px rgba(14, 19, 48, 0.2);
    --shadow-float: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
    --shadow-panel: 0 24px 60px -12px rgba(14, 19, 48, 0.35);

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

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

@media (max-width: 1199.98px) {
    :root { --gutter: 32px; --sidebar-width: 290px; --layout-gap: 1.5rem; }
}
@media (max-width: 640px) {
    :root { --gutter: 16px; --header-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    :root { --transition-fast: 0ms; --transition: 0ms; }
}