/* ==========================================================================
   Design Tokens — JNO Portuguesa 2026
   ========================================================================== */

:root {
    /* Brand colors */
    --jno-blue:        #003DA5;
    --jno-blue-dark:   #002B75;
    --jno-blue-light:  #1A5FCC;
    --jno-green:       #00843D;
    --jno-green-dark:  #005C2A;
    --jno-green-light: #00A64D;
    --jno-yellow:      #FFD100;
    --jno-yellow-dark: #E6BC00;
    --jno-red:         #E63946;
    --jno-orange:      #FF6B35;

    /* Neutrals */
    --jno-white:       #FFFFFF;
    --jno-gray-50:     #F8F9FA;
    --jno-gray-100:    #F1F3F5;
    --jno-gray-200:    #E9ECEF;
    --jno-gray-300:    #DEE2E6;
    --jno-gray-400:    #CED4DA;
    --jno-gray-500:    #ADB5BD;
    --jno-gray-600:    #868E96;
    --jno-gray-700:    #495057;
    --jno-gray-800:    #343A40;
    --jno-gray-900:    #212529;
    --jno-black:       #111111;

    /* Semantic */
    --color-primary:    var(--jno-blue);
    --color-secondary:  var(--jno-green);
    --color-accent:     var(--jno-yellow);
    --color-danger:     var(--jno-red);
    --color-success:    var(--jno-green);
    --color-warning:    var(--jno-orange);
    --color-bg:         var(--jno-white);
    --color-bg-alt:     var(--jno-gray-50);
    --color-text:       var(--jno-gray-900);
    --color-text-muted: var(--jno-gray-600);

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body:    'Open Sans', sans-serif;

    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.125rem;   /* 18px */
    --fs-lg:   1.25rem;    /* 20px */
    --fs-xl:   1.5rem;     /* 24px */
    --fs-2xl:  2rem;       /* 32px */
    --fs-3xl:  2.5rem;     /* 40px */
    --fs-4xl:  3rem;       /* 48px */
    --fs-5xl:  3.5rem;     /* 56px */

    --fw-regular:   400;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;
    --fw-black:     900;

    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    /* Spacing */
    --sp-1:  0.25rem;   /* 4px */
    --sp-2:  0.5rem;    /* 8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */
    --sp-16: 4rem;      /* 64px */
    --sp-20: 5rem;      /* 80px */
    --sp-24: 6rem;      /* 96px */

    /* Layout */
    --container-max:    1280px;
    --container-narrow: 960px;
    --container-wide:   1440px;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:  0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow:   500ms ease;

    /* Z-index */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;

    /* Header */
    --header-height: 100px;
}