/* ==========================================================================
   Design Tokens — CSS Custom Properties
   Edit these to control the entire site's look from one place.
   ========================================================================== */

:root {

    /* --- Brand Colors --------------------------------------------------- */
    --color-primary:        #1a1a2e;   /* Deep navy — main brand color      */
    --color-primary-light:  #16213e;
    --color-accent:         #e94560;   /* Vivid red-pink — CTA / highlights  */
    --color-accent-hover:   #c73652;

    /* --- Neutral Palette ------------------------------------------------ */
    --color-white:          #ffffff;
    --color-off-white:      #f8f8f8;
    --color-light-gray:     #ebebeb;
    --color-mid-gray:       #9e9e9e;
    --color-dark-gray:      #333333;
    --color-black:          #0d0d0d;

    /* --- Active Palette Aliases ----------------------------------------- */
    --ekc-palette-bg:       var(--color-off-white);
    --ekc-palette-surface:  var(--color-white);
    --ekc-palette-border:   var(--color-light-gray);
    --ekc-palette-text:     var(--color-black);
    --ekc-palette-muted:    var(--color-mid-gray);

    /* --- Semantic Theme Tokens ----------------------------------------- */
    --ekc-brand-primary:        var(--color-primary);
    --ekc-brand-primary-light:  var(--color-primary-light);
    --ekc-brand-secondary:      var(--color-primary-light);
    --ekc-brand-accent:         var(--color-accent);
    --ekc-brand-accent-hover:   var(--color-accent-hover);

    --ekc-surface-page:         var(--ekc-palette-bg);
    --ekc-surface:              var(--ekc-palette-surface);
    --ekc-surface-soft:         var(--color-light-gray);
    --ekc-surface-raised:       var(--color-white);
    --ekc-border:               var(--ekc-palette-border);

    --ekc-text-primary:         var(--ekc-palette-text);
    --ekc-text-soft:            var(--color-dark-gray);
    --ekc-text-muted:           var(--ekc-palette-muted);
    --ekc-text-inverse:         var(--color-white);

    /* --- Semantic Colors ------------------------------------------------ */
    --color-success:        #28a745;
    --color-warning:        #ffc107;
    --color-error:          #dc3545;
    --color-info:           #17a2b8;

    /* --- Typography ----------------------------------------------------- */
    --font-heading:         'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-body:            'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:            'Fira Code', 'Courier New', monospace;

    --ekc-font-heading:     var(--font-heading);
    --ekc-font-body:        var(--font-body);
    --ekc-font-mono:        var(--font-mono);
    --ekc-font-editorial-heading: 'Antic Didone', Georgia, serif;
    --ekc-font-editorial-body:    'Raleway', Arial, sans-serif;

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

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

    --line-height-tight:    1.2;
    --line-height-base:     1.6;
    --line-height-loose:    1.9;

    --letter-spacing-tight:  0;
    --letter-spacing-base:   0;
    --letter-spacing-wide:   0.05em;
    --letter-spacing-wider:  0.1em;

    /* --- Spacing 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 */
    --space-32:  8rem;      /* 128px */

    /* --- Layout --------------------------------------------------------- */
    --container-sm:         640px;
    --container-md:         768px;
    --container-lg:         1024px;
    --container-xl:         1280px;
    --container-2xl:        1440px;

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

    --ekc-radius-sm:      var(--radius-sm);
    --ekc-radius-md:      var(--radius-md);
    --ekc-radius-card:    var(--radius-md);
    --ekc-radius-panel:   var(--radius-lg);
    --ekc-radius-pill:    var(--radius-full);

    /* --- Shadows -------------------------------------------------------- */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.16);
    --shadow-glow:  0 0 24px rgba(233, 69, 96, 0.35);   /* accent glow */

    --ekc-shadow-soft:    var(--shadow-sm);
    --ekc-shadow-card:    var(--shadow-md);
    --ekc-shadow-raised:  var(--shadow-lg);

    /* --- Transitions & Easing ------------------------------------------ */
    --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);   /* snappy decelerate */
    --ease-in-out:      cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
    --ease-linear:      linear;

    --duration-fast:    150ms;
    --duration-base:    250ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;

    --transition-base:  var(--duration-base) var(--ease-out);
    --transition-slow:  var(--duration-slow) var(--ease-out);

    /* --- Z-Index Scale -------------------------------------------------- */
    --z-below:      -1;
    --z-base:        0;
    --z-raised:     10;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-toast:      500;
}