/* ═══════════════════════════════════════════════════════════════════════
   ALENAS 2.0 — Design System
   Geïmporteerd NA main.css / dashboard.css / admin.css zodat tokens en
   component refinements gericht voorrang krijgen.

   FASE 1 — design tokens + utility classes (gold-rule, pill, status-dot)
   FASE 2 — component migrations (stat cards, buttons, cards, inputs)
   FASE 3 — section dividers + eyebrow/title polish + partner refinement

   FONTS: Inter + JetBrains Mono worden via <link rel="stylesheet"> in de
   layouts geladen — niet via @import (sneller + betrouwbaarder).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   FASE 1 — DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --bg-base:        #060810;
    --bg-elevated:    #0E1018;
    --bg-overlay:     #1A1D27;
    --bg:             #060810;
    --bg-2:           #0E1018;

    --text-primary:   #FAFAFB;
    --text-secondary: #8A8E98;
    --text-tertiary:  #4A4E58;

    --gold-light:     #E0C168;
    --gold-soft:      rgba(200, 168, 75, 0.10);
    --gold-line:      rgba(200, 168, 75, 0.40);

    --success:        #2ECC87;
    --success-soft:   rgba(46, 204, 135, 0.12);
    --danger:         #E05858;
    --danger-soft:    rgba(224, 88, 88, 0.12);
    --warning:        #F0A726;
    --warning-soft:   rgba(240, 167, 38, 0.12);
    --info:           #5B8FF9;
    --info-soft:      rgba(91, 143, 249, 0.14);

    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-divider: rgba(255, 255, 255, 0.04);

    --space-minimal:  4px;
    --space-tight:    8px;
    --space-cosy:     12px;
    --space-default:  16px;
    --space-loose:    24px;
    --space-wide:     32px;
    --space-xl:       40px;
    --space-vast:     64px;

    --radius-sm:      6px;
    --radius-md:      10px;
    --radius-lg:      14px;
    --radius-xl:      18px;
    --radius-xxl:     28px;
    --radius-full:    999px;

    --font-body:      'Inter', system-ui, sans-serif;
    --font-brand:     'Outfit', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', 'Menlo', monospace;
    --font-b:         'Inter', system-ui, sans-serif;

    /* Override main.css --font-h (was Outfit) — alle headings → Inter,
       matchend met de Alenas Trading app. Outfit blijft beschikbaar
       via --font-brand voor specifiek branding gebruik. */
    --font-h:         'Inter', system-ui, sans-serif;
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override .dash-body / .admin-body / .auth-body explicit font-family rules
   from dashboard.css / admin.css / auth.css (which use the legacy --font-b).
   Direct font stack — guaranteed Inter wherever it's loaded. */
body,
body.dash-body,
body.admin-body,
body.auth-body,
body.admin-login {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 1 — UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════ */

.gold-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-line) 15%, var(--gold-line) 85%, transparent 100%);
    margin: var(--space-cosy) 0 var(--space-loose);
    border: 0;
}
.gold-rule.short  { width: 80px; }
.gold-rule.center { margin-left: auto; margin-right: auto; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pill.gold     { background: var(--gold-soft);    color: var(--gold); }
.pill.success  { background: var(--success-soft); color: var(--success); }
.pill.danger   { background: var(--danger-soft);  color: var(--danger); }
.pill.warning  { background: var(--warning-soft); color: var(--warning); }
.pill.info     { background: var(--info-soft);    color: var(--info); }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
}
.status-dot.success { background: var(--success); }
.status-dot.danger  { background: var(--danger); }
.status-dot.gold    { background: var(--gold); }
.status-dot.info    { background: var(--info); }
.status-dot.pulse {
    animation: alx-pulse 1.2s ease-in-out infinite alternate;
    box-shadow: 0 0 8px currentColor;
}
@keyframes alx-pulse {
    from { opacity: 1;   transform: scale(1); }
    to   { opacity: 0.5; transform: scale(1.2); }
}

.tabular { font-variant-numeric: tabular-nums; }

.alx-display       { font-family: var(--font-body); font-size: 56px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.05; color: var(--text-primary); }
.alx-section-title { font-family: var(--font-body); font-size: 32px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; color: var(--text-primary); }
.alx-subtitle      { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--text-primary); }
.alx-eyebrow       { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-tertiary); }
.alx-eyebrow.gold  { color: var(--gold); }
.alx-label-mini    { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-tertiary); }

.alx-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-default);
}
.alx-card.tinted {
    background: var(--gold-soft);
    border-color: var(--gold-line);
}

@media (max-width: 720px) {
    .alx-display       { font-size: 40px; letter-spacing: -0.8px; }
    .alx-section-title { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 2 — COMPONENT MIGRATIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Dashboard stat cards */
.stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-default) var(--space-loose);
    gap: var(--space-tight);
}
.stat-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.stat-value {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.stat-value--pos { color: var(--success); }
.stat-value--neg { color: var(--danger); }
.stat-meta {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Dashboard cards */
.dash-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-loose);
}
.dash-card:hover {
    border-color: var(--gold-line);
}

.indicator-widget__form .btn,
.indicator-widget input {
    border-radius: var(--radius-md);
}

/* Buttons */
.btn {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    transition: all 150ms ease;
}
.btn--gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--bg-base);
    box-shadow: 0 4px 18px rgba(200, 168, 75, 0.18);
}
.btn--gold:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 6px 24px rgba(200, 168, 75, 0.3);
}
.btn--ghost {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}
.btn--ghost:hover {
    color: var(--text-primary);
    border-color: var(--gold-line);
}

/* Hero pillars */
.hero-pillar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-default) var(--space-loose);
    transition: all 200ms ease;
}
.hero-pillar:hover {
    border-color: var(--gold-line);
    background: var(--gold-soft);
}
.hero-pillar__icon {
    border-radius: var(--radius-md);
}
.hero-pillar__title {
    font-family: var(--font-body);
    font-weight: 600;
}
.hero-pillar__text {
    font-family: var(--font-body);
    color: var(--text-secondary);
}

/* Profile status badge */
.profile-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
}
.profile-status--ok       { background: var(--success-soft); color: var(--success); }
.profile-status--pending  { background: var(--gold-soft);    color: var(--gold); }
.profile-status--rejected { background: var(--danger-soft);  color: var(--danger); }

.profile-info__value--mono {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.profile-info__label {
    color: var(--text-secondary);
}

/* Form inputs */
.profile-form__field input,
.auth-form input[type='text'],
.auth-form input[type='email'],
.auth-form input[type='password'],
.admin-form input[type='text'],
.admin-form input[type='email'],
.admin-form input[type='password'],
.admin-form textarea,
.admin-form select {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body);
    transition: border-color 150ms;
}
.profile-form__field input::placeholder,
.auth-form input::placeholder,
.admin-form input::placeholder,
.admin-form textarea::placeholder {
    color: var(--text-tertiary);
}
.profile-form__field input:focus,
.auth-form input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    outline: none;
    border-color: var(--gold);
}
.profile-form__field small {
    color: var(--text-tertiary);
    font-size: 12px;
}
.profile-section__title {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}
.profile-section__hint {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Trade stats */
.trade-stat__value {
    font-family: var(--font-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.trade-stat__label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.trade-table td.pnl,
.trade-table .trade-pnl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Admin polish */
.admin-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.admin-table th {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.admin-flash {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}
.admin-flash--success {
    background: var(--success-soft);
    border: 1px solid rgba(46, 204, 135, 0.3);
    color: var(--success);
}
.admin-flash--error,
.admin-flash--danger {
    background: var(--danger-soft);
    border: 1px solid rgba(224, 88, 88, 0.3);
    color: var(--danger);
}

.dashboard-greeting {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.auth-card,
.auth-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.admin-sidebar {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-subtle);
}

.dash-page-header h1,
.admin-page-header h1 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}
.dash-page-header p,
.admin-page-header p {
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE 3 — SECTION DIVIDERS + EYEBROW/TITLE POLISH
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Gold rule dividers tussen sections ───
   Plaats een centered gold-rule aan de TOP van elke section behalve de eerste.
   Alleen op publieke pagina's — NIET op dashboard, admin, of auth pages.  */
main > section {
    position: relative;
}
body:not(.dash-body):not(.admin-body):not(.admin-login):not(.auth-body)
    main > section:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-line) 50%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

/* Op kleine schermen: smaller divider voor proportioneel uitzicht */
@media (max-width: 700px) {
    body:not(.dash-body):not(.admin-body):not(.admin-login):not(.auth-body)
        main > section:not(:first-child)::before {
        width: 80px;
    }
}

/* ─── Eyebrow refinement ───
   Default: gold (Alenas branding). Voeg `.muted` toe voor grey variant. */
.eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--space-cosy);
}
.eyebrow.muted {
    color: var(--text-tertiary);
}

/* Eyebrow varianten in specifieke blocks */
.cta-card__eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
}

/* ─── Section titles polish ─── */
.xalping-section__title,
.features-section__title,
.app-download__title,
.community-pulse__title,
.cta-card__title,
.daily-timeline__title,
.showcase__title {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--text-primary);
}

/* ─── Section sub/lead text ─── */
.xalping-section__sub,
.features-section__sub,
.app-download__sub,
.community-pulse__sub,
.cta-card__sub,
.daily-timeline__sub,
.showcase__sub {
    color: var(--text-secondary);
    font-family: var(--font-body);
    line-height: 1.65;
}

/* ─── Hero eyebrow ─── */
.hero__eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
}

/* ─── Partner hero refinement (navy restyle) ─── */
/* Foto-ring + titel/intro worden volledig in main.css gestyled
   (partner page navy restyle). Hier alleen de intro-leesbaarheid. */
.partner-hero__intro {
    line-height: 1.68;
}

/* ─── Community pulse stats ─── */
.community-pulse__value {
    font-family: var(--font-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}
.community-pulse__label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ─── CTA section refinement ─── */
.cta-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
}

/* ─── Features grid items ─── */
.features-grid__item,
.feature-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

/* ─── Daily timeline items ─── */
.daily-timeline__item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

/* ─── Footer polish ─── */
.site-footer {
    border-top: 1px solid var(--border-subtle);
}
.site-footer__col-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.site-footer__link {
    color: var(--text-secondary);
    transition: color 150ms;
}
.site-footer__link:hover {
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   END
   ═══════════════════════════════════════════════════════════════════════ */