/* ==========================================================================
   DESIGN SYSTEM - VARIABLES & TOKENS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* ----------------------------------------------------------------------
       1. COLOR PALETTE
       ---------------------------------------------------------------------- */
    /* Primary & Brand Dark */
    --color-navy-dark: #101a31;
    --color-navy-dark-rgb: 16, 26, 49;

    /* Accents & States */
    --color-accent-gold: #fca311;
    --color-accent-gold-alt: #fca31f;
    --color-accent-gold-hover: rgb(227, 147, 15);
    --color-accent-gold-focus-shadow: rgba(252, 163, 17, 0.25);

    /* Neutrals & Surfaces */
    --color-bg-light-1: #fcfcfc;
    --color-bg-light-2: #f5f5f5;
    --color-bg-light-3: #f0eeea;
    --color-white-off: #fffdf7;
    
    /* Monochrome Core */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-shadow-black-20: hsl(0 0% 0% / 20%);
    --color-shadow-black-10: rgba(0, 0, 0, 0.1);

    /* ----------------------------------------------------------------------
       2. TYPOGRAPHY
       ---------------------------------------------------------------------- */
    /* Font Families */
    --font-serif: "Lora", serif;
    --font-sans: "Montserrat", sans-serif;

    /* Font Weights */
    --weight-thin: 100;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.4;
    --line-height-relaxed: 1.8;

    /* ----------------------------------------------------------------------
       3. SHAPES & LAYOUT
       ---------------------------------------------------------------------- */
    /* Border Radii */
    --radius-sm: 4px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --radius-pill: 24px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.75s ease;
    --transition-drawer: 0.75s ease-out;

    /* Shadows */
    --shadow-card: 0 4px 20px var(--color-shadow-black-10);
    --shadow-elevation: 0 1rem 2rem var(--color-shadow-black-20);
}