/* ============================================================
   CSS Custom Properties — Design Tokens (Step 2 Refinement)
   Eleta Lifts and Escalators Design System
   Core CSS Custom Properties & Design Tokens
   ============================================================ */

/* ------------------------------------------------------------
   1. COLOR SCALES (Light Theme / Base)
   ------------------------------------------------------------ */
:root,
:root[data-theme="light"] {

    /* TEXT */
    --text-50:  #f1f3f4;
    --text-100: #e3e6e8;
    --text-200: #c7cdd1;
    --text-300: #abb4ba;
    --text-400: #8f9ba3;
    --text-500: #73828c;
    --text-600: #5c6870;
    --text-700: #454e54;
    --text-800: #2e3438;
    --text-900: #171a1c;
    --text-950: #0b0d0e;

    /* ARCHITECTURAL NEUTRALS */
    --background-50:  #f5f4f0;
    --background-100: #eeede9;
    --background-200: #e2e1dc;
    --background-300: #d4d3cd;
    --background-400: #c3c3bd;
    --background-500: #a9aaa5;
    --background-600: #858783;
    --background-700: #626562;
    --background-800: #404341;
    --background-900: #252827;
    --background-950: #111313;

    /* ELITA RED (Core Brand Accent) */
    --primary-50:  #fdebed;
    --primary-100: #fbd7da;
    --primary-200: #f7afb4;
    --primary-300: #f2878e;
    --primary-400: #ec5f68;
    --primary-500: #df303a;
    --primary-600: #ba121b; /* Foundation Brand Red */
    --primary-700: #970e16;
    --primary-800: #720b11;
    --primary-900: #4c070b;
    --primary-950: #280306;

    /* ELITA NAVY (Core Structural / Dark Base) */
    --secondary-50:  #edf4f6;
    --secondary-100: #dbe8eb;
    --secondary-200: #b7d1d6;
    --secondary-300: #8eafb7;
    --secondary-400: #648d98;
    --secondary-500: #456f7b;
    --secondary-600: #315663;
    --secondary-700: #25434e;
    --secondary-800: #19333c;
    --secondary-900: #102a33;
    --secondary-950: #07171d; /* Foundation Deep Navy */

    /* ACCENT (Mapped to Elita Red Scale) */
    --accent-50:  #fdebed;
    --accent-100: #fbd7da;
    --accent-200: #f7afb4;
    --accent-300: #f2878e;
    --accent-400: #ec5f68;
    --accent-500: #df303a;
    --accent-600: #ba121b;
    --accent-700: #970e16;
    --accent-800: #720b11;
    --accent-900: #4c070b;
    --accent-950: #280306;

    /* STATUS TOKENS (Functional UI) */
    --color-success: #16803c;
    --color-warning: #a16207;
    --color-error:   #b42318;
    --color-info:    #2563eb;

    /* ------------------------------------------------------------
       2. SEMANTIC TOKENS (Light Theme)
       ------------------------------------------------------------ */
    --color-page:           var(--background-50);
    --color-surface:        #ffffff;
    --color-surface-muted:  var(--background-100);
    --color-surface-dark:   var(--secondary-950);

    --color-text:           var(--text-900);
    --color-text-muted:     var(--text-600);
    --color-text-light:     var(--text-50);

    --color-brand:          var(--primary-600);
    --color-brand-hover:    var(--primary-700);
    --color-brand-soft:     var(--primary-50);

    --color-dark:           var(--secondary-950);
    --color-dark-rgb:       7, 23, 29;
    --color-dark-surface:   var(--secondary-900);

    --color-border:         var(--background-200);
    --color-border-dark:    var(--secondary-700);

    --color-white:          #ffffff;
    --color-white-rgb:      255, 255, 255;
    --color-black:          #000000;

    /* Backward-compatibility Aliases for Existing Components */
    --color-primary:        var(--secondary-950);
    --color-primary-rgb:    7, 23, 29;
    --color-secondary:      var(--primary-600);
    --color-secondary-rgb:  186, 18, 27;
    --color-accent:         var(--primary-600);
    --color-light:          var(--background-50);
    --color-light-rgb:      245, 244, 240;
    --color-surface-light:  var(--background-100);
    --color-muted:          var(--text-600);
    --color-muted-light:    var(--text-400);
}

/* ------------------------------------------------------------
   3. DARK THEME SEMANTIC MAPPING
   ------------------------------------------------------------ */
:root[data-theme="dark"] {

    --color-page:           var(--secondary-950);
    --color-surface:        var(--secondary-900);
    --color-surface-muted:  var(--secondary-800);
    --color-surface-dark:   var(--secondary-950);

    --color-text:           var(--text-50);
    --color-text-muted:     var(--text-300);
    --color-text-light:     #ffffff;

    --color-brand:          var(--primary-600);
    --color-brand-hover:    var(--primary-500);
    --color-brand-soft:     var(--primary-900);

    --color-dark:           var(--secondary-950);
    --color-dark-rgb:       7, 23, 29;
    --color-dark-surface:   var(--secondary-900);

    --color-border:         var(--secondary-700);
    --color-border-dark:    var(--secondary-600);

    --color-white:          #ffffff;
    --color-white-rgb:      255, 255, 255;

    /* Backward-compatibility Aliases (Dark mode) */
    --color-primary:        var(--secondary-950);
    --color-primary-rgb:    7, 23, 29;
    --color-secondary:      var(--primary-500);
    --color-secondary-rgb:  223, 48, 58;
    --color-accent:         var(--primary-500);
    --color-light:          var(--secondary-900);
    --color-light-rgb:      16, 42, 51;
    --color-surface-light:  var(--secondary-900);
    --color-muted:          var(--text-300);
    --color-muted-light:    var(--text-200);
}

/* ------------------------------------------------------------
   4. TYPOGRAPHY TOKENS (Step 2 Refined)
   ------------------------------------------------------------ */
@font-face {
    font-family: 'RoslaneDEMO';
    src: url('../../fonts/RoslaneDEMO-Regular.otf') format('opentype'),
         url('../fonts/RoslaneDEMO-Regular.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-heading:       'RoslaneDEMO', 'Manrope', sans-serif;
    --font-body:          'Inter', sans-serif;

    /* Fluid Typography Scale */
    --fs-display:   clamp(4rem, 7vw, 9rem);
    --fs-h1:        clamp(3rem, 5.5vw, 6rem);
    --fs-h2:        clamp(2.5rem, 4.5vw, 4.5rem);
    --fs-h3:        clamp(2rem, 3vw, 3.25rem);
    --fs-h4:        clamp(1.5rem, 2vw, 2rem);
    --fs-body-lg:   clamp(1.05rem, 1.1vw, 1.25rem);
    --fs-body:      clamp(1rem, 0.8vw + 0.4rem, 1.125rem);
    --fs-small:     0.875rem;
    --fs-tiny:      0.75rem;
    --fs-nav:       0.9375rem;

    /* Font Weights */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* Line Heights */
    --lh-tight:     0.95;
    --lh-heading:   1.05;
    --lh-snug:      1.25;
    --lh-normal:    1.6;
    --lh-relaxed:   1.75;

    /* Letter Spacings */
    --ls-tight:    -0.03em;
    --ls-normal:    0;
    --ls-wide:      0.04em;
    --ls-wider:     0.08em;
    --ls-label:     0.12em;
    --ls-widest:    0.12em; /* alias */

    /* ------------------------------------------------------------
       5. SPACING TOKENS (Numerical Scale + Semantic Aliases)
       ------------------------------------------------------------ */
    --space-1:      4px;
    --space-2:      8px;
    --space-3:      12px;
    --space-4:      16px;
    --space-5:      24px;
    --space-6:      32px;
    --space-7:      40px;
    --space-8:      48px;
    --space-9:      64px;
    --space-10:     80px;
    --space-11:     96px;
    --space-12:     120px;
    --space-13:     160px;
    --space-14:     200px;

    /* Semantic Aliases for Compatibility */
    --space-xs:     var(--space-2);   /* 8px */
    --space-sm:     var(--space-3);   /* 12px */
    --space-md:     var(--space-4);   /* 16px */
    --space-lg:     var(--space-5);   /* 24px */
    --space-xl:     var(--space-6);   /* 32px */
    --space-2xl:    var(--space-8);   /* 48px */
    --space-3xl:    var(--space-9);   /* 64px */
    --space-4xl:    var(--space-11);  /* 96px */
    --space-5xl:    var(--space-13);  /* 160px */

    /* Fluid Section Spacing */
    --section-padding:   clamp(40px, 5vw, 64px);
    --section-space-sm:  clamp(28px, 3vw, 44px);
    --section-space-md:  clamp(40px, 5vw, 64px);
    --section-space-lg:  clamp(56px, 6vw, 84px);

    /* ------------------------------------------------------------
       6. LAYOUT & CONTAINER TOKENS
       ------------------------------------------------------------ */
    --container-wide:       1600px;
    --container-width:      1440px;
    --container-narrow:     900px;
    --container-padding:    clamp(32px, 5vw, 80px);
    
    --navbar-height:        90px;
    --navbar-height-scroll: 70px;

    /* ------------------------------------------------------------
       7. BORDER RADIUS TOKENS (Architectural Hierarchy)
       ------------------------------------------------------------ */
    --radius-xs:    4px;    /* Default buttons & inputs */
    --radius-sm:    8px;    /* Cards & containers */
    --radius-md:    12px;   /* Elevated panels */
    --radius-lg:    16px;   /* Modals */
    --radius-xl:    24px;   /* Large surfaces */
    --radius-2xl:   32px;
    --radius-full:  9999px; /* Status badges & pills only */

    /* ------------------------------------------------------------
       8. SHADOW TOKENS
       ------------------------------------------------------------ */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.15);
    --shadow-glow:  0 0 40px rgba(186, 18, 27, 0.18);
    --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.06);

    /* ------------------------------------------------------------
       9. MOTION & TRANSITION TOKENS (Precise Architectural)
       ------------------------------------------------------------ */
    --transition-fast:    180ms ease;
    --transition-base:    300ms ease;
    --transition-slow:    500ms ease;
    --transition-slower:  700ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-spring:  600ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ------------------------------------------------------------
       10. Z-INDEX TOKENS
       ------------------------------------------------------------ */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-navbar:     500;
    --z-overlay:    600;
    --z-modal:      700;
    --z-toast:      800;
    --z-whatsapp:   850;
    --z-max:        9999;
}