/* ============================================================
   AndreasScheibel UiBase — Design Tokens & Component Styles
   ============================================================ */

/* ----------------------------------------------------------
   01 · COLOR TOKENS
   ---------------------------------------------------------- */
:root {
    /* Background — layered navies for depth */
    --color-bg-base:        #01081E;   /* deep navy – page background */
    --color-bg-surface:     #0A1330;   /* card / elevated section surfaces */
    --color-bg-elevated:    #0E1838;   /* hover surfaces, subtle elevation */
    --color-bg-overlay:     #050D24;   /* nav / footer / alt sections */

    /* Brand */
    --color-brand-teal:     #01A59D;   /* primary accent */
    --color-brand-teal-dim: #019990;   /* hover / pressed */
    --color-brand-blue:     #1B75BB;   /* secondary accent */
    --color-brand-blue-dim: #1668A8;
    --color-brand-cyan:     #00BFFF;
    --color-brand-mint:     #92F4EC;   /* light teal – eyebrows, accents */

    /* Brand gradients & accent washes */
    --gradient-brand:        linear-gradient(120deg, #01A59D 0%, #1B9FB8 48%, #1B75BB 100%);
    --gradient-brand-soft:   linear-gradient(120deg, rgba(1,165,157,0.16), rgba(27,117,187,0.16));
    --gradient-surface:      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    --gradient-surface-hover:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));

    /* Text */
    --color-text-primary:   #F4F8FF;   /* headings, strong body */
    --color-text-secondary: #C5CFDF;   /* body, descriptions */
    --color-text-muted:     #8A99B8;   /* secondary descriptions */
    --color-text-faint:     #58688B;   /* fine print, disabled */
    --color-text-inverted:  #FFFFFF;   /* text on teal/gradient bg */

    /* Borders — hairlines over the dark base */
    --color-border-subtle:  rgba(255,255,255,0.08);
    --color-border-default: rgba(255,255,255,0.14);
    --color-border-accent:  #01A59D;

    /* Semantic */
    --color-error:          #EF4444;
    --color-success:        #22C55E;
}

/* ----------------------------------------------------------
   02 · TYPOGRAPHY TOKENS
   ---------------------------------------------------------- */
:root {
    --font-sans:    'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Exo 2', 'DM Sans', 'Segoe UI', sans-serif;
    --font-mono:    'DM Mono', 'JetBrains Mono', 'Consolas', monospace;

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

    /* Weight */
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;
    --font-extrabold:800;
    --font-black:    900;

    /* Line height */
    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.6;
    --leading-relaxed:1.75;
}

/* ----------------------------------------------------------
   03 · SPACING TOKENS
   ---------------------------------------------------------- */
:root {
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
}

/* ----------------------------------------------------------
   04 · BORDER RADIUS TOKENS
   ---------------------------------------------------------- */
:root {
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   22px;
    --radius-2xl:  26px;
    --radius-full: 9999px;
}

/* ----------------------------------------------------------
   05 · SHADOW TOKENS
   ---------------------------------------------------------- */
:root {
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:  0 14px 40px rgba(0,0,0,0.45);
    --shadow-lg:  0 30px 80px rgba(0,0,0,0.55);
    --shadow-card-hover: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(1,165,157,0.12);
    --shadow-teal: 0 0 0 1px rgba(1,165,157,0.25), 0 4px 24px rgba(1,165,157,0.12);
    --glow-teal: 0 0 60px rgba(1,165,157,0.35);
}

/* ----------------------------------------------------------
   05b · EASING TOKENS
   ---------------------------------------------------------- */
:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------
   06 · BUTTON STYLES
   ---------------------------------------------------------- */
.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 15px var(--space-7);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease;
    white-space: nowrap;
}

.as-btn--lg {
    padding: 17px var(--space-8);
    font-size: var(--text-lg);
}

.as-btn--primary {
    background: var(--gradient-brand);
    color: var(--color-text-inverted);
    border-color: transparent;
    box-shadow: 0 8px 26px rgba(1, 165, 157, 0.28);
}

.as-btn--primary:hover,
.as-btn--primary:focus-visible {
    box-shadow: 0 16px 40px rgba(1, 165, 157, 0.4);
    transform: translateY(-2px);
}

.as-btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.as-btn--secondary:hover,
.as-btn--secondary:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.as-btn--link {
    background: transparent;
    color: var(--color-brand-teal);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.as-btn--link:hover,
.as-btn--link:focus-visible {
    color: var(--color-brand-teal-dim);
}

.as-btn:active {
    transform: scale(0.97) !important;
    transition-duration: 80ms !important;
}

.as-btn:focus-visible {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ----------------------------------------------------------
   07 · SECTION STYLES
   ---------------------------------------------------------- */
.as-section {
    width: 100%;
    padding: clamp(var(--space-20), 11vw, var(--space-32)) 0;
    border-top: 1px solid var(--color-border-subtle);
    position: relative;
}

/* Alternating surface rhythm — subtle elevation + ambient brand wash */
.as-section--surface {
    background:
        radial-gradient(ellipse 60% 70% at 100% 0%, rgba(1, 165, 157, 0.05), transparent 60%),
        radial-gradient(ellipse 60% 70% at 0% 100%, rgba(27, 117, 187, 0.05), transparent 60%),
        var(--color-bg-overlay);
}

.as-section__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(var(--space-5), 5vw, var(--space-16));
    position: relative;
}

.as-section__header {
    margin-bottom: clamp(var(--space-10), 6vw, var(--space-20));
    max-width: 720px;
}

.as-section__header--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.as-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-brand-mint);
    margin-bottom: var(--space-4);
}

.as-section__eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-brand-teal), transparent);
}

.as-section__header--center .as-section__eyebrow {
    justify-content: center;
}

.as-section__header--center .as-section__eyebrow::after {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-brand-teal), transparent);
}

.as-section__header--center .as-section__eyebrow::before {
    background: linear-gradient(90deg, transparent, var(--color-brand-teal));
}

.as-section__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 4.4vw, 3.3rem);
    font-weight: var(--font-extrabold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
}

.as-section__lead {
    font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: var(--space-5) 0 0;
}

.as-section__header--center .as-section__lead {
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------------------
   08 · CARD STYLES
   ---------------------------------------------------------- */
.as-card {
    position: relative;
    background: var(--gradient-surface), var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

/* Gradient hairline border revealed on hover (mask technique, no layout shift) */
.as-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-brand);
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.as-card:hover {
    border-color: rgba(15, 207, 184, 0.18);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
    background: var(--gradient-surface-hover), var(--color-bg-elevated);
}

.as-card:hover::before {
    opacity: 0.7;
}

/* Feature variant — strongest emphasis (e.g. flagship project) */
.as-card--feature {
    background:
        radial-gradient(ellipse 90% 70% at 100% 0%, rgba(15, 207, 184, 0.12), transparent 58%),
        radial-gradient(ellipse 80% 70% at 0% 100%, rgba(59, 130, 246, 0.10), transparent 60%),
        var(--color-bg-elevated);
    border-color: rgba(15, 207, 184, 0.22);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15, 207, 184, 0.08);
}

.as-card--feature::before {
    opacity: 0.35;
}

.as-card--feature:hover {
    box-shadow: var(--shadow-card-hover);
    background:
        radial-gradient(ellipse 90% 70% at 100% 0%, rgba(15, 207, 184, 0.16), transparent 58%),
        radial-gradient(ellipse 80% 70% at 0% 100%, rgba(59, 130, 246, 0.12), transparent 60%),
        var(--color-bg-elevated);
}

.as-card--feature:hover::before {
    opacity: 0.85;
}

/* ----------------------------------------------------------
   09 · TAG / CHIP STYLES
   ---------------------------------------------------------- */
.as-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.as-tag:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

/* ----------------------------------------------------------
   10 · TRUST ITEM STYLES
   ---------------------------------------------------------- */
.as-trust-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

.as-trust-item::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--color-brand-teal);
    box-shadow: 0 0 10px rgba(1, 165, 157, 0.6);
    flex-shrink: 0;
}