/* ==========================================================================
   eesier design system — DESIGN TOKENS
   --------------------------------------------------------------------------
   Single source of truth for every visual primitive on the marketing site.
   Every color, spacing value, font size, radius, shadow, transition and
   z-index used by any component MUST come from this file. No magic numbers.
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       COLORS — BRAND
       Primary blue, secondary cyan, accent orange. The 50/100 tints are used
       for tinted surfaces; 600/700 for hover/active states.
       ---------------------------------------------------------------------- */

    --e-color-primary-50:  #eef7ff;
    --e-color-primary-100: #d8efff;
    --e-color-primary:     #1c91e4;
    --e-color-primary-600: #167ac3;
    --e-color-primary-700: #11639f;

    --e-color-secondary-50:  #e8f8ff;
    --e-color-secondary-100: #d0f0ff;
    --e-color-secondary:     #4fbefe;

    --e-color-accent-50:  #fff4f0;
    --e-color-accent-100: #ffe8e0;
    --e-color-accent:     #ff6f3c;
    --e-color-accent-600: #e55a2b;
    --e-color-accent-700: #cc4a1f;


    /* ----------------------------------------------------------------------
       COLORS — NEUTRALS
       Surface = white card; background = subtle off-white; ink = dark text;
       muted = secondary text; border = light hairlines.
       ---------------------------------------------------------------------- */

    --e-color-surface:    #ffffff;
    --e-color-background: #f6f7fc;
    --e-color-ink:        #0f172a;
    --e-color-ink-soft:   #1e293b;
    --e-color-muted:      #475569;
    --e-color-muted-soft: #64748b;
    --e-color-border:     #e2e8f0;


    /* ----------------------------------------------------------------------
       COLORS — SECTION SURFACES
       The five backgrounds every section can sit on. Adjacent sections must
       never share a surface — alternating creates visual rhythm.
       ---------------------------------------------------------------------- */

    --e-surface-light: var(--e-color-surface);     /* white */
    --e-surface-soft:  var(--e-color-background);  /* off-white */
    --e-surface-blue:  #dbeafe;                    /* light blue */
    --e-surface-dark:  var(--e-color-ink);         /* dark navy */
    --e-surface-darkest: #050a18;                  /* deepest navy */


    /* ----------------------------------------------------------------------
       COLORS — TEXT ON DARK
       Use these on .e-section--dark surfaces. Never use rgba(255,255,255,x)
       directly in component CSS.
       ---------------------------------------------------------------------- */

    --e-text-on-dark:        #ffffff;
    --e-text-on-dark-strong: rgba(255, 255, 255, 0.95);
    --e-text-on-dark-muted:  rgba(255, 255, 255, 0.70);
    --e-text-on-dark-faint:  rgba(255, 255, 255, 0.40);
    --e-text-on-dark-ghost:  rgba(255, 255, 255, 0.20);
    --e-border-on-dark:      rgba(255, 255, 255, 0.08);


    /* ----------------------------------------------------------------------
       SPACING SCALE
       Project rule: only 10 / 25 / 50 / 75 / 100 / 200px allowed. Semantic
       names are the API; raw values are the implementation.
       ---------------------------------------------------------------------- */

    --e-space-xs:  10px;
    --e-space-sm:  25px;
    --e-space-md:  50px;
    --e-space-lg:  75px;
    --e-space-xl:  100px;
    --e-space-2xl: 200px;


    /* ----------------------------------------------------------------------
       TYPOGRAPHY
       Quicksand family. Sizes follow a 2x scale anchored to 14px base.
       ---------------------------------------------------------------------- */

    --e-font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --e-font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --e-font-handwriting: 'Caveat', cursive;

    --e-font-size-xs:   11px;
    --e-font-size-sm:   14px;
    --e-font-size-md:   16px;
    --e-font-size-lg:   18px;
    --e-font-size-xl:   24px;
    --e-font-size-2xl:  32px;
    --e-font-size-3xl:  42px;
    --e-font-size-4xl:  56px;
    --e-font-size-5xl:  72px;
    --e-font-size-6xl:  96px;

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

    --e-leading-tight:   1.2;
    --e-leading-snug:    1.4;
    --e-leading-normal:  1.6;
    --e-leading-relaxed: 1.75;

    --e-tracking-tight:  -0.025em;
    --e-tracking-normal: 0;
    --e-tracking-wide:   0.05em;
    --e-tracking-wider:  0.1em;


    /* ----------------------------------------------------------------------
       BORDERS & RADII
       ---------------------------------------------------------------------- */

    --e-radius-sm:   6px;
    --e-radius-md:   10px;
    --e-radius-lg:   16px;
    --e-radius-xl:   25px;
    --e-radius-2xl:  50px;
    --e-radius-full: 9999px;

    --e-border-width: 1px;
    --e-border-light: 1px solid var(--e-color-border);
    --e-border-dark:  1px solid var(--e-border-on-dark);


    /* ----------------------------------------------------------------------
       SHADOWS
       ---------------------------------------------------------------------- */

    --e-shadow-soft:  0 10px 30px rgba(15, 23, 42, 0.08);
    --e-shadow-lift:  0 18px 55px rgba(15, 23, 42, 0.14);
    --e-shadow-deep:  0 25px 80px rgba(0, 0, 0, 0.30);
    --e-shadow-focus: 0 0 0 4px rgba(28, 145, 228, 0.25);
    --e-shadow-glow-blue:   0 4px 24px rgba(28, 145, 228, 0.25);
    --e-shadow-glow-accent: 0 4px 24px rgba(255, 111, 60, 0.25);


    /* ----------------------------------------------------------------------
       TRANSITIONS
       ---------------------------------------------------------------------- */

    --e-transition-fast: 150ms ease;
    --e-transition-base: 200ms ease;
    --e-transition-slow: 400ms ease;


    /* ----------------------------------------------------------------------
       Z-INDEX
       ---------------------------------------------------------------------- */

    --e-z-base:           1;
    --e-z-decoration:     2;
    --e-z-content:        5;
    --e-z-dropdown:      10;
    --e-z-sticky:        20;
    --e-z-fixed:         30;
    --e-z-modal-backdrop: 40;
    --e-z-modal:         50;
    --e-z-tooltip:       60;
    --e-z-noise:        99999;


    /* ----------------------------------------------------------------------
       LAYOUT
       ---------------------------------------------------------------------- */

    --e-container-max:    1400px;
    --e-container-narrow: 960px;
    --e-container-prose:  720px;
    --e-container-text:   600px;

    --e-section-pad-y:        var(--e-space-lg);  /* 75px desktop default */
    --e-section-pad-y-mobile: var(--e-space-md);  /* 50px mobile default */


    /* ----------------------------------------------------------------------
       BREAKPOINTS
       Documented as custom properties for reference only. Use the @media
       queries directly with these literal values to keep CSS portable.
       ---------------------------------------------------------------------- */

    --e-bp-sm: 640px;
    --e-bp-md: 768px;
    --e-bp-lg: 1024px;
    --e-bp-xl: 1280px;
    --e-bp-2xl: 1536px;

}