/* ==========================================================================
   TheHourlyNews
   Design System
   variables.css
   Version: 1.0
   ========================================================================== */

   :root {

    /* ==========================================================================
       BRAND
       ========================================================================== */

    --color-primary: #0f172a;
    --color-primary-light: #1e293b;
    --color-primary-dark: #020617;

    --color-accent: #c81e1e;
    --color-accent-hover: #991b1b;

    /* ==========================================================================
       NEUTRAL PALETTE
       ========================================================================== */

    --white: #ffffff;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --black: #000000;

    /* ==========================================================================
       SEMANTIC COLORS
       ========================================================================== */

    --color-background: var(--white);

    --color-surface: var(--gray-50);

    --color-surface-alt: var(--gray-100);

    --color-border: var(--gray-200);

    --color-border-strong: var(--gray-300);

    --color-heading: var(--gray-900);

    --color-text: var(--gray-700);

    --color-text-light: var(--gray-500);

    --color-text-inverse: var(--white);

    /* ==========================================================================
       STATUS
       ========================================================================== */

    --success: #16a34a;
    --warning: #ca8a04;
    --danger: #dc2626;
    --info: #0284c7;

    /* ==========================================================================
       OVERLAY
       ========================================================================== */

    --overlay-light: rgba(255,255,255,.72);

    --overlay-dark: rgba(15,23,42,.78);

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

       --font-heading:
       "Newsreader",
       Georgia,
       serif;

    --font-body:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        SFMono-Regular,
        Consolas,
        monospace;

    /* ==========================================================================
       FONT WEIGHT
       ========================================================================== */

    --weight-light:300;
    --weight-regular:400;
    --weight-medium:500;
    --weight-semibold:600;
    --weight-bold:700;
    --weight-black:800;

    /* ==========================================================================
       FONT SIZE
       ========================================================================== */

    --display-xl:5rem;
    --display-lg:4rem;

    --heading-1:3.5rem;
    --heading-2:2.75rem;
    --heading-3:2rem;
    --heading-4:1.5rem;
    --heading-5:1.25rem;
    --heading-6:1.125rem;

    --text-xl:1.25rem;
    --text-lg:1.125rem;
    --text-base:1rem;
    --text-sm:.875rem;
    --text-xs:.75rem;

    /* ==========================================================================
       LINE HEIGHT
       ========================================================================== */

    --leading-none:1;
    --leading-tight:1.15;
    --leading-heading:1.2;
    --leading-body:1.7;
    --leading-loose:1.9;

    /* ==========================================================================
       LETTER SPACING
       ========================================================================== */

    --tracking-tight:-0.04em;
    --tracking-normal:0;
    --tracking-wide:.06em;

    /* ==========================================================================
       SPACING SCALE
       4px Base
       ========================================================================== */

    --space-0:0;

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-7:1.75rem;
    --space-8:2rem;

    --space-10:2.5rem;
    --space-12:3rem;

    --space-16:4rem;

    --space-20:5rem;

    --space-24:6rem;

    --space-32:8rem;

    /* ==========================================================================
       CONTAINERS
       ========================================================================== */

    --container-xs:480px;
    --container-sm:640px;
    --container-md:768px;
    --container-lg:1024px;
    --container-xl:1280px;
    --container-2xl:1440px;
    --container-full:1600px;

    --reading-width:72ch;

    /* ==========================================================================
       GRID
       ========================================================================== */

    --grid-gap-xs:.75rem;
    --grid-gap-sm:1rem;
    --grid-gap-md:1.5rem;
    --grid-gap-lg:2rem;
    --grid-gap-xl:3rem;

    /* ==========================================================================
       SECTION SPACING
       ========================================================================== */

    --section-xs:2rem;
    --section-sm:3rem;
    --section-md:5rem;
    --section-lg:7rem;
    --section-xl:9rem;

    /* ==========================================================================
       RADIUS
       ========================================================================== */

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-pill:9999px;

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    --shadow-xs:
        0 1px 2px rgba(15,23,42,.05);

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.08);

    --shadow-md:
        0 12px 32px rgba(15,23,42,.10);

    --shadow-lg:
        0 24px 64px rgba(15,23,42,.14);

    --shadow-xl:
        0 40px 90px rgba(15,23,42,.18);

    /* ==========================================================================
       MOTION
       ========================================================================== */

    --ease-standard:cubic-bezier(.4,0,.2,1);

    --transition-fast:.15s var(--ease-standard);

    --transition-base:.25s var(--ease-standard);

    --transition-slow:.4s var(--ease-standard);

    /* ==========================================================================
       HEADER
       ========================================================================== */

    --utility-height:42px;

    --header-height:82px;

    /* ==========================================================================
       BUTTONS
       ========================================================================== */

    --button-height:48px;

    --button-radius:9999px;

    /* ==========================================================================
       FORMS
       ========================================================================== */

    --input-height:52px;

    --input-radius:12px;

    /* ==========================================================================
       IMAGE RATIOS
       ========================================================================== */

    --ratio-square:1/1;

    --ratio-landscape:16/9;

    --ratio-editorial:4/3;

    --ratio-portrait:3/4;

    /* ==========================================================================
       Z INDEX
       ========================================================================== */

    --z-base:1;

    --z-dropdown:100;

    --z-sticky:500;

    --z-overlay:900;

    --z-modal:1000;

    --z-toast:1100;

    /* ==========================================================================
       BREAKPOINTS
       ========================================================================== */

    --bp-mobile:480px;

    --bp-tablet:768px;

    --bp-laptop:1024px;

    --bp-desktop:1280px;

    --bp-wide:1440px;

    /* ==========================================================================
       FOCUS
       ========================================================================== */

    --focus-ring:
        0 0 0 3px rgba(200,30,30,.18);

}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] {

    --color-background:#0f172a;

    --color-surface:#1e293b;

    --color-surface-alt:#334155;

    --color-border:#334155;

    --color-border-strong:#475569;

    --color-heading:#ffffff;

    --color-text:#e2e8f0;

    --color-text-light:#94a3b8;

}