/* ============================================================
   DESIGN TOKENS
   Instituto Tecnológico CEPRO
   Single source of truth for colors, typography, spacing, etc.
   ============================================================ */

:root {

    /* ============================================
       COLORS — Brand
       ============================================ */
    --color-primary:            rgb(2, 56, 164);       /* Institutional blue */
    --color-primary-light:      rgb(16, 80, 209);
    --color-primary-dark:       rgb(1, 40, 120);

    --color-accent:             rgb(224, 126, 1);      /* Institutional orange */
    --color-accent-light:       rgb(241, 154, 40);
    --color-accent-dark:        rgb(190, 105, 0);

    /* ============================================
       COLORS — Feedback
       ============================================ */
    --color-success:            #00bd09;
    --color-success-light:      #3ecc45;
    --color-danger:             #ca0707;
    --color-danger-light:       #c93232;
    --color-warning:            #efcd00;
    --color-warning-light:      #ebcf34;

    /* ============================================
       COLORS — Neutrals (gray scale)
       ============================================ */
    --color-white:              #ffffff;
    --color-black:              rgb(20, 19, 19);

    --color-gray-50:            #f9fafb;
    --color-gray-100:           #f3f4f6;
    --color-gray-200:           #e5e7eb;
    --color-gray-300:           #d1d5db;
    --color-gray-400:           #9ca3af;
    --color-gray-500:           #6b7280;
    --color-gray-600:           #4b5563;
    --color-gray-700:           #374151;
    --color-gray-800:           #1f2937;
    --color-gray-900:           #111827;

    /* ============================================
       COLORS — Alpha / Transparent
       ============================================ */
    --color-primary-a10:        rgba(2, 56, 164, 0.10);
    --color-primary-a20:        rgba(2, 56, 164, 0.20);
    --color-primary-a50:        rgba(2, 56, 164, 0.50);
    --color-primary-a70:        rgba(2, 56, 164, 0.70);

    --color-accent-a10:         rgba(224, 126, 1, 0.10);
    --color-accent-a50:         rgba(224, 126, 1, 0.50);

    --color-white-a70:          rgba(255, 255, 255, 0.70);
    --color-white-a90:          rgba(255, 255, 255, 0.90);
    --color-black-a30:          rgba(11, 11, 11, 0.30);
    --color-black-a50:          rgba(11, 11, 11, 0.50);
    --color-black-a70:          rgba(11, 11, 11, 0.70);

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-family-base:         'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --font-size-xs:             0.75rem;    /* 12px */
    --font-size-sm:             0.875rem;   /* 14px */
    --font-size-base:           1rem;       /* 16px */
    --font-size-lg:             1.125rem;   /* 18px */
    --font-size-xl:             1.25rem;    /* 20px */
    --font-size-2xl:            1.5rem;     /* 24px */
    --font-size-3xl:            1.875rem;   /* 30px */
    --font-size-4xl:            2.25rem;    /* 36px */
    --font-size-5xl:            3rem;       /* 48px */
    --font-size-6xl:            3.75rem;    /* 60px */

    --font-weight-regular:      400;
    --font-weight-medium:       500;
    --font-weight-semibold:     600;
    --font-weight-bold:         700;
    --font-weight-extrabold:    800;

    --line-height-tight:        1.2;
    --line-height-snug:         1.4;
    --line-height-normal:       1.5;
    --line-height-relaxed:      1.7;

    --letter-spacing-tight:     -0.02em;
    --letter-spacing-normal:    0;
    --letter-spacing-wide:      0.05em;

    /* ============================================
       SPACING (8-point scale)
       ============================================ */
    --space-1:                  0.25rem;    /* 4px */
    --space-2:                  0.5rem;     /* 8px */
    --space-3:                  0.75rem;    /* 12px */
    --space-4:                  1rem;       /* 16px */
    --space-5:                  1.25rem;    /* 20px */
    --space-6:                  1.5rem;     /* 24px */
    --space-8:                  2rem;       /* 32px */
    --space-10:                 2.5rem;     /* 40px */
    --space-12:                 3rem;       /* 48px */
    --space-16:                 4rem;       /* 64px */
    --space-20:                 5rem;       /* 80px */
    --space-24:                 6rem;       /* 96px */

    /* ============================================
       RADII
       ============================================ */
    --radius-sm:                6px;
    --radius-md:                10px;
    --radius-lg:                16px;
    --radius-xl:                24px;
    --radius-full:              9999px;

    /* ============================================
       SHADOWS (multi-layer, softer)
       ============================================ */
    --shadow-xs:                0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:                0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:                0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg:                0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl:                0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05);
    --shadow-2xl:               0 25px 50px -12px rgba(0,0,0,0.18);

    --shadow-primary:           0 10px 25px -5px rgba(2, 56, 164, 0.25);
    --shadow-accent:            0 10px 25px -5px rgba(224, 126, 1, 0.30);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast:          150ms ease;
    --transition-base:          250ms ease;
    --transition-slow:          400ms ease;
    --transition-slower:        600ms ease;

    /* ============================================
       LAYOUT
       ============================================ */
    --container-max:            1200px;
    --container-padding:        1.25rem;    /* 20px */

    --header-top-height:        40px;
    --header-main-height:       70px;
    --header-total-height:      110px;

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-base:                   1;
    --z-dropdown:               100;
    --z-sticky:                 500;
    --z-header:                 1000;
    --z-overlay:                2000;
    --z-modal:                  3000;
    --z-loader:                 7000;
    --z-toast:                  8000;

    /* ============================================================
       BACKWARD COMPATIBILITY ALIASES
       Keep old variable names working so existing files
       (home.css, navigation.css, etc.) don't break.
       ============================================================ */

    /* Colors */
    --white-color:              var(--color-white);
    --white-color-transparent:  var(--color-white-a70);
    --black-color:              var(--color-black);
    --black-color-transparent:  var(--color-black-a50);

    --blue-color:               var(--color-primary);
    --lightblue-color:          var(--color-primary-light);
    --blue-color-transparent:   var(--color-primary-a50);

    --silver-color:             #e6e6e6;
    --lightsilver-color:        #f3f3f3;
    --grey-color:               #444444;
    --lightgrey-color:          #666565;

    --red-color:                var(--color-danger);
    --lightred-color:           var(--color-danger-light);

    --golden-color:             var(--color-warning);
    --lightgolden-color:        var(--color-warning-light);

    --green-color:              var(--color-success);
    --lightgreen-color:         var(--color-success-light);

    --orange-color:             var(--color-accent);
    --orange-color-transparent: var(--color-accent-a50);
    --lightorange-color:        var(--color-accent-light);

    /* Medusa aliases (kept as-is) */
    --background-white-color:           #fff;
    --background-blue-color:            #0238a4;
    --background-hover-blue-color:      #1e49a0;
    --background-silver-color:          #e6e6e6;
    --background-hover-silver-color:    #acaaaa;
    --background-grey-color:            #444444;
    --background-hover-grey-color:      #666565;
    --background-transparent-color:     rgba(0,0,0,.7);
    --background-red-color:             #ca0707;
    --background-hover-red-color:       #c93232;
    --background-golden-color:          #f5af18;
    --background-golden-opacity-color:  #f5af184b;
    --background-hover-golden-color:    #f7c559;
    --background-green-color:           #0d8a13;
    --background-hover-green-color:     #308d35;
    --background-orange-color:          #ff6804;
    --background-hover-orange-color:    #e6803d;
    --background-lightorange-color:     #e09738;

    --font-white-color:             #fff;
    --font-hover-white-color:       rgba(250, 250, 250, .7);
    --font-blue-color:              #0238a4;
    --font-hover-blue-color:        rgba(27, 65, 190, 0.7);
    --font-red-color:               #ca0707;
    --font-hover-red-color:         rgba(230, 65, 65, 0.7);
    --font-orange-color:            #ff6804;
    --font-grey-color:              #353535;
    --font-green-color:             #0d8a13;
    --font-golden-color:            #f5af18;

    --font-size-icon-nav-menu:      var(--font-size-5xl);
    --font-size-title-level-one:    var(--font-size-4xl);
    --font-size-title-level-two:    var(--font-size-3xl);
    --font-size-title-level-three:  var(--font-size-xl);
    --font-size-normal-text:        var(--font-size-base);

    --line-height-size:             var(--line-height-relaxed);
    --normal-line-height-size:      normal;

    --shadow-black-color:           #000;
    --shadow-golden-color:          #f5af18;
}