/* ==========================================================================
   eesier design system — PRIMITIVES
   --------------------------------------------------------------------------
   Universal building blocks used by every component. Composing pages out of
   these primitives is the path of least resistance — anything you find
   yourself reaching for that ISN'T here is probably a missing primitive,
   not a missing one-off rule.

   What lives here:
     1. LAYOUT      — container, stack, row, wrap
     2. TYPOGRAPHY  — headings, eyebrow, muted, gradient
     3. BUTTON      — .e-btn with --primary / --white / --ghost / --accent
     4. CARD        — .e-card with --soft / --dark / --glass
     5. SECTION     — .e-section with --light / --soft / --blue / --dark
     6. DECORATION  — noise overlay, gradient text helpers
   ========================================================================== */


/* ==========================================================================
   1. LAYOUT
   ========================================================================== */


/* CONTAINER — every section's inner wrapper. 1400px max, centered, padded. */

.e-container {
    width: 100%;
    max-width: var(--e-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left:  var(--e-space-sm);
    padding-right: var(--e-space-sm);
}

.e-container--narrow { max-width: var(--e-container-narrow); }
.e-container--prose  { max-width: var(--e-container-prose);  }
.e-container--text   { max-width: var(--e-container-text);   }


/* STACK — vertical flex with consistent gap between children. */

.e-stack {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-sm);
}

.e-stack--xs { gap: var(--e-space-xs); }
.e-stack--md { gap: var(--e-space-md); }
.e-stack--lg { gap: var(--e-space-lg); }


/* ROW — horizontal flex with gap; wraps onto multiple lines as needed. */

.e-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--e-space-sm);
    align-items: center;
}

.e-row--start { align-items: flex-start; }
.e-row--end   { justify-content: flex-end; }
.e-row--center{ justify-content: center; }
.e-row--between { justify-content: space-between; }
.e-row--xs { gap: var(--e-space-xs); }
.e-row--md { gap: var(--e-space-md); }


/* CENTER — flex centering both axes. */

.e-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* WRAP — flexbox grid replacement. Children claim a percentage of the row.
   --2 = two columns, --3 = three columns, --4 = four columns. Wraps on
   mobile to a single column via the responsive override at the bottom. */

.e-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-space-sm);
}

.e-wrap--2 > * { flex: 1 1 calc(50% - (var(--e-space-sm) / 2)); }
.e-wrap--3 > * { flex: 1 1 calc(33.333% - (var(--e-space-sm) * 2 / 3)); }
.e-wrap--4 > * { flex: 1 1 calc(25% - (var(--e-space-sm) * 3 / 4)); }


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */


/* HEADLINE — primary blue, bold, used for hero h1. */

.e-headline {
    font-size: var(--e-font-size-2xl);
    font-weight: var(--e-font-weight-bold);
    line-height: var(--e-leading-tight);
    letter-spacing: var(--e-tracking-tight);
    color: var(--e-color-primary);
    margin: 0;
}

.e-headline .e-headline-accent { color: var(--e-color-accent); }
.e-headline .e-headline-secondary { color: var(--e-color-secondary); }


/* EYEBROW — small caps tracking text above a headline. */

.e-eyebrow {
    font-size: var(--e-font-size-xs);
    font-weight: var(--e-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--e-tracking-wider);
    color: var(--e-color-muted);
    margin: 0;
}


/* PROSE BODY TEXT */

.e-text-body {
    font-size: var(--e-font-size-md);
    line-height: var(--e-leading-relaxed);
    color: var(--e-color-ink);
    font-weight: var(--e-font-weight-normal);
}

.e-text-body p { margin: 0 0 var(--e-space-xs); }
.e-text-body p:last-child { margin-bottom: 0; }


/* TEXT MODIFIERS */

.e-text-muted     { color: var(--e-color-muted); }
.e-text-muted-soft{ color: var(--e-color-muted-soft); }
.e-text-primary   { color: var(--e-color-primary); }
.e-text-secondary { color: var(--e-color-secondary); }
.e-text-accent    { color: var(--e-color-accent); }
.e-text-strong    { font-weight: var(--e-font-weight-bold); }
.e-text-medium    { font-weight: var(--e-font-weight-medium); }


/* GRADIENT TEXT — animated blue→cyan shimmer. Used for emphasis spans. */

.e-text-gradient {
    background: linear-gradient(90deg, var(--e-color-primary), var(--e-color-secondary), var(--e-color-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: e-gradient-shift 3s ease-in-out infinite;
}


/* ==========================================================================
   3. BUTTON
   --------------------------------------------------------------------------
   These rules are kept VISUALLY IDENTICAL to legacy `.btn` from
   Eesier.Web.Shared/wwwroot/css/buttons.css. Any drift here changes every
   CTA on the marketing site. If you need to change a visual, change the
   legacy file as well — they are mirrors.
   ========================================================================== */


/* BASE — every button shares this layout. Variants override colors only. */

.e-btn {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border: none;
    transition: 0.2s ease-in-out;
    border-radius: 100px;
    height: 48px;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding-left: 25px;
    padding-right: 25px;
    background-color: #4fbefe;
    color: #fff;
    fill: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0px 6px 0px 0px #1c91e4;
    font-family: 'Quicksand';
    text-decoration: none;
    margin-bottom: 10px;
    line-height: 1;
    white-space: nowrap;
}

.e-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(28, 145, 228, 0.25);
}


/* PRIMARY — blue 3D button. Default CTA on light surfaces. */

.e-btn--primary {
    background: #0ea5e9;
    color: #ffffff;
    box-shadow: 0px 6px 0px 0px #1c91e4;
}

.e-btn--primary:active {
    transform: translateY(1px);
}

.e-btn--primary:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}


/* ACCENT — orange button. Use sparingly for high-attention CTAs. */

.e-btn--accent {
    background: #ff6f3c;
    color: #ffffff;
    box-shadow: 0px 6px 0px 0px #cc4a1f;
}

.e-btn--accent:active {
    transform: translateY(1px);
}

.e-btn--accent:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}


/* SECONDARY — light blue button. */

.e-btn--secondary {
    background: #eef7ff;
    color: #1c91e4;
    box-shadow: 0px 6px 0px 0px #d8efff;
}

.e-btn--secondary:active {
    transform: translateY(1px);
}


/* WHITE — for use on dark surfaces. */

.e-btn--white {
    background: #ffffff;
    color: #1c91e4;
    box-shadow: none;
}

.e-btn--white:active {
    transform: translateY(1px);
}


/* GHOST-LIGHT — transparent + light border. For secondary CTAs on dark. */

.e-btn--ghost-light {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
}


/* GHOST-DARK — transparent + dark border. For secondary CTAs on light.
   Mirrors legacy `.btn-ghost`. */

.e-btn--ghost-dark {
    background-color: transparent;
    color: #0ea5e9;
    border: 2px solid #0ea5e9;
    box-shadow: 0px 6px 0px 0px rgba(14, 165, 233, 0.15);
}


/* SIZE MODIFIERS — kept for parity with legacy partial behavior. The legacy
   site has no .btn--lg / .btn--sm; the e-btn--lg / --sm modifiers here are
   no-ops at default sizing so visuals match legacy unmodified buttons. */

.e-btn--sm,
.e-btn--lg { /* Match base size to keep visuals identical to legacy `.btn`. */ }


/* FULL WIDTH */

.e-btn--block { display: flex; width: 100%; }


/* HOVER EFFECTS (only on devices that support hover) — mirror of legacy. */

@media (hover: hover) {

    .e-btn:hover {
        transform: translateY(-2px);
    }

    .e-btn--primary:hover {
        background: #0284c7;
        box-shadow: 0px 40px 29px -19px #1c91e4;
    }

    .e-btn--accent:hover {
        background: #e55a2b;
        box-shadow: 0px 40px 29px -19px #cc4a1f;
    }

    .e-btn--secondary:hover {
        background: #d8efff;
        box-shadow: 0px 40px 29px -19px #1c91e4;
    }

    .e-btn--white:hover {
        background: #eef7ff;
    }

    .e-btn--ghost-light:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .e-btn--ghost-dark:hover {
        background-color: #eef7ff;
        box-shadow: 0px 40px 29px -19px rgba(14, 165, 233, 0.15);
    }

}


/* TOUCH PRESS FEEDBACK (only on touch devices) */

@media (hover: none) {

    .e-btn:active {
        transform: scale(0.95);
        opacity: 0.85;
    }

}


/* ==========================================================================
   4. CARD
   ========================================================================== */


/* BASE CARD — white surface with light border, soft shadow, rounded. */

.e-card {
    background: var(--e-color-surface);
    border: var(--e-border-light);
    border-radius: var(--e-radius-xl);
    padding: var(--e-space-md);
    box-shadow: var(--e-shadow-soft);
    transition: transform var(--e-transition-base), box-shadow var(--e-transition-base), border-color var(--e-transition-base);
}

.e-card--interactive:hover {
    transform: translateY(-4px);
    border-color: rgba(28, 145, 228, 0.20);
    box-shadow: var(--e-shadow-lift);
}


/* SOFT — slightly darker than page background. For grouping on light bg. */

.e-card--soft {
    background: var(--e-color-background);
    border-color: var(--e-color-border);
    box-shadow: none;
}


/* DARK — for use inside .e-section--dark. */

.e-card--dark {
    background: var(--e-color-ink-soft);
    border-color: rgba(28, 145, 228, 0.15);
    color: var(--e-text-on-dark-strong);
    box-shadow: none;
}


/* GLASS — frosted glass effect. Use on rich background images. */

.e-card--glass {
    background: rgba(255, 255, 255, 0.60);
    border-color: rgba(28, 145, 228, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* PADDING MODIFIERS */

.e-card--pad-sm { padding: var(--e-space-sm); }
.e-card--pad-lg { padding: var(--e-space-lg); }


/* ==========================================================================
   5. SECTION
   ========================================================================== */


/* BASE — every visual section on every page is an .e-section. The base
   handles vertical padding (75px desktop / 50px mobile via the responsive
   override below) and stacking context for wave dividers + decorative
   pseudo-elements. */

.e-section {
    position: relative;
    z-index: var(--e-z-base);
    padding-top: var(--e-section-pad-y);
    padding-bottom: var(--e-section-pad-y);
}


/* SURFACE VARIANTS */

.e-section--light { background: var(--e-surface-light); }
.e-section--soft  { background: var(--e-surface-soft);  }
.e-section--blue  { background: var(--e-surface-blue);  }
.e-section--dark  { background: var(--e-surface-dark); color: var(--e-text-on-dark-strong); }


/* DARK SECTION TEXT INHERITANCE — automatically dim subtitles + body text
   so component CSS doesn't have to override per-section. */

.e-section--dark .e-text-body  { color: var(--e-text-on-dark-muted); }
.e-section--dark .e-text-muted { color: var(--e-text-on-dark-muted); }


/* HERO — full-viewport height variant. Used by page-level heroes. */

.e-section--hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--e-space-sm);
    padding-bottom: var(--e-space-sm);
}


/* SPACING ESCAPE HATCHES — for unusual transitions only. Adjacent sections
   should NEVER share a surface; if you need extra bleed, add a modifier. */

.e-section--pad-tight { padding-top: var(--e-space-md); padding-bottom: var(--e-space-md); }
.e-section--pad-loose { padding-top: var(--e-space-xl); padding-bottom: var(--e-space-xl); }


/* ==========================================================================
   6. DECORATION
   ========================================================================== */


/* NOISE OVERLAY — subtle grain across the entire viewport. Drop in once
   per page (in the layout) for the brand texture. */

.e-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--e-z-noise);
}

.e-noise::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}


/* ==========================================================================
   RESPONSIVE — MOBILE OVERRIDES
   --------------------------------------------------------------------------
   Below 1024px the section padding shrinks and multi-column wraps collapse
   to single-column.
   ========================================================================== */

@media (max-width: 1023px) {

    .e-section {
        padding-top: var(--e-section-pad-y-mobile);
        padding-bottom: var(--e-section-pad-y-mobile);
    }

    .e-wrap--2 > *,
    .e-wrap--3 > *,
    .e-wrap--4 > * {
        flex: 1 1 100%;
    }

}