/* ==========================================================================
   NexiBook Design System — tokens.css
   Inter @font-face declarations + full design tokens + primitive components
   Scope: .nb (applied to body on NexiBook mobile-first pages only)
   ========================================================================== */

/* ─── Self-hosted Inter (only the 4 weights we ship) ────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./fonts/inter-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/inter-700.woff2') format('woff2');
}

/* ==========================================================================
   NexiBook Design System — Colors, Typography, Tokens
   Source: nexibook-landing/css/style-2026.css (Stripe-inspired, WCAG AA)
   ========================================================================== */

:root {
    --nb-font-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

    /* ─── Core palette (premium dark + gold) ─────────────────────────── */
    --nb-bg-body:          #050505;   /* near-black page */
    --nb-bg-surface:       #0f0f10;   /* raised cards, sections */
    --nb-bg-surface-trans: rgba(15, 15, 16, 0.8);
    --nb-glass:            rgba(255, 255, 255, 0.03);

    --nb-gold:             #FFD700;   /* primary brand */
    --nb-gold-hover:       #E6C200;
    --nb-gold-dim:         #FDB931;   /* mid gradient stop */
    --nb-gold-deep:        #F5AF3D;

    --nb-text-main:        #ffffff;
    --nb-text-muted:       #c0c0c0;   /* WCAG AA on #050505 */
    --nb-text-secondary:   #909090;
    --nb-text-on-gold:     #000000;

    --nb-border-light:     rgba(255, 255, 255, 0.10);
    --nb-border-gold:      rgba(255, 215, 0, 0.30);

    /* ─── Semantic (status) ──────────────────────────────────────────── */
    --nb-success:          #4ade80;   /* table ✓ */
    --nb-warn:             #fbbf24;   /* table ⚠ */
    --nb-danger:           #f87171;   /* table ✗ */
    --nb-accent-violet:    #8b5cf6;   /* "Coming soon" / quiz pills */
    --nb-accent-indigo:    #6366f1;

    /* Alt app palette — used in the booking app (Insightful) */
    --nb-app-primary:      #6366f1;   /* indigo, booking admin */
    --nb-app-success:      #10b981;
    --nb-app-cta:          #f59e0b;

    /* ─── Legacy compatibility aliases ───────────────────────────────────
       Pre-DS CSS files (on the landing site AND the booking app) reference
       --color-* variables. Map them onto --nb-* tokens here so that legacy
       rules keep working without a rewrite. On admin surfaces, the
       admin_palette.css file overrides --color-primary (and friends) to
       indigo; on everything else, these aliases resolve to gold.  */
    --color-primary:         var(--nb-gold);
    --color-primary-hover:   var(--nb-gold-hover);
    --color-primary-text:    var(--nb-text-on-gold);
    --color-primary-rgb:     255, 215, 0;
    --color-primary-light:   rgba(255, 215, 0, 0.12);
    --color-primary-lighter: rgba(255, 215, 0, 0.06);

    --color-gold:            var(--nb-gold);
    --color-gold-hover:      var(--nb-gold-hover);

    --color-bg:              var(--nb-bg-body);
    --color-bg-body:         var(--nb-bg-body);
    --color-bg-surface:      var(--nb-bg-surface);
    --color-surface:         var(--nb-bg-surface);
    --color-glass:           var(--nb-glass);

    --color-text:            var(--nb-text-main);
    --color-text-main:       var(--nb-text-main);
    --color-text-muted:      var(--nb-text-muted);
    --color-text-secondary:  var(--nb-text-secondary);
    --color-text-on-gold:    var(--nb-text-on-gold);

    --color-border:          var(--nb-border-light);
    --color-border-light:    var(--nb-border-light);
    --color-border-gold:     var(--nb-border-gold);

    --color-success:         var(--nb-success);
    --color-warn:            var(--nb-warn);
    --color-warning:         var(--nb-warn);
    --color-danger:          var(--nb-danger);
    --color-error:           var(--nb-danger);

    --font-primary:          var(--nb-font-sans);
    --font-sans:             var(--nb-font-sans);
    --font-mono:             var(--nb-font-mono);

    /* ─── Gradients ──────────────────────────────────────────────────── */
    --nb-gradient-gold:          linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #F5AF3D 100%);
    --nb-gradient-gold-subtle:   linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.05) 100%);
    --nb-gradient-gold-wash:     linear-gradient(180deg, rgba(255,215,0,0.08) 0%, var(--nb-bg-surface) 100%);
    --nb-gradient-h1:            linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    --nb-gradient-dark-fade:     linear-gradient(180deg, rgba(5,5,5,0) 0%, #050505 100%);
    --nb-gradient-violet:        linear-gradient(135deg, #8b5cf6, #6366f1);

    /* ─── Typography ─────────────────────────────────────────────────── */
    --nb-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --nb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --nb-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --nb-font-body-alt: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --nb-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --nb-weight-regular: 400;
    --nb-weight-medium:  500;
    --nb-weight-semi:    600;
    --nb-weight-bold:    700;

    /* Fluid sizes — match style-2026.css clamp() values */
    --nb-size-h1:     clamp(2rem, 5vw, 4.5rem);      /* 32 → 72 */
    --nb-size-h2:     clamp(1.75rem, 4vw, 3rem);     /* 28 → 48 */
    --nb-size-h3:     clamp(1.25rem, 3vw, 1.75rem);  /* 20 → 28 */
    --nb-size-h4:     1.125rem;                      /* 18 */
    --nb-size-lead:   clamp(1.1rem, 3vw, 1.25rem);   /* 17.6 → 20 */
    --nb-size-body:   clamp(0.95rem, 2.5vw, 1.125rem);/* 15 → 18 */
    --nb-size-small:  0.875rem;                      /* 14 */
    --nb-size-xs:     0.75rem;                       /* 12 — badges */

    --nb-line-heading: 1.1;
    --nb-line-body:    1.6;
    --nb-line-lead:    1.7;
    --nb-track-heading: -0.01em;

    /* ─── 8-pt spacing scale ─────────────────────────────────────────── */
    --nb-space-1:  0.5rem;    /*  8 */
    --nb-space-2:  1rem;      /* 16 */
    --nb-space-3:  1.5rem;    /* 24 */
    --nb-space-4:  2rem;      /* 32 */
    --nb-space-5:  2.5rem;    /* 40 */
    --nb-space-6:  3rem;      /* 48 */
    --nb-space-8:  4rem;      /* 64 */
    --nb-space-10: 5rem;      /* 80 */
    --nb-space-12: 6rem;      /* 96 */
    --nb-space-16: 8rem;      /* 128 */

    /* ─── Radius ─────────────────────────────────────────────────────── */
    --nb-radius-sm:   8px;
    --nb-radius-md:   12px;
    --nb-radius-lg:   16px;
    --nb-radius-xl:   24px;
    --nb-radius-full: 9999px;

    /* ─── Layered shadows (Stripe-inspired) ──────────────────────────── */
    --nb-shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --nb-shadow-md:
        0 1px 2px rgba(0,0,0,0.10),
        0 4px 8px rgba(0,0,0,0.15);
    --nb-shadow-lg:
        0 1px 2px rgba(0,0,0,0.10),
        0 4px 8px rgba(0,0,0,0.15),
        0 12px 24px rgba(0,0,0,0.20);
    --nb-shadow-xl:
        0 1px 3px rgba(0,0,0,0.10),
        0 8px 16px rgba(0,0,0,0.15),
        0 24px 48px rgba(0,0,0,0.25);
    --nb-shadow-gold:
        0 2px 4px rgba(255,215,0,0.10),
        0 8px 16px rgba(255,215,0,0.15),
        0 24px 48px rgba(255,215,0,0.20);
    --nb-shadow-gold-sm: 0 4px 12px rgba(255,215,0,0.20);

    /* ─── Easing ─────────────────────────────────────────────────────── */
    --nb-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --nb-ease-out:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --nb-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ─── Layout ─────────────────────────────────────────────────────── */
    --nb-container:   1200px;
    --nb-header-h:    80px;
    --nb-blur-md:     12px;
    --nb-blur-lg:     20px;
}

/* ==========================================================================
   Semantic element defaults from design system
   ========================================================================== */
.nb-body, body.nb {
    background: var(--nb-bg-body);
    color: var(--nb-text-main);
    font-family: var(--nb-font-sans);
    font-size: var(--nb-size-body);
    line-height: var(--nb-line-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nb h1, h1.nb {
    font-size: var(--nb-size-h1);
    line-height: var(--nb-line-heading);
    font-weight: var(--nb-weight-bold);
    letter-spacing: var(--nb-track-heading);
    background: var(--nb-gradient-h1);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 var(--nb-space-3);
}
.nb h2, h2.nb { font-size: var(--nb-size-h2); line-height: var(--nb-line-heading); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-track-heading); color: var(--nb-text-main); margin: 0 0 var(--nb-space-2); }
.nb h3, h3.nb { font-size: var(--nb-size-h3); line-height: 1.2;  font-weight: var(--nb-weight-bold); color: var(--nb-text-main); margin: 0 0 var(--nb-space-2); }
.nb h4, h4.nb { font-size: var(--nb-size-h4); line-height: 1.3;  font-weight: var(--nb-weight-semi); color: var(--nb-text-main); margin: 0 0 var(--nb-space-1); }

.nb p,  p.nb  { font-size: var(--nb-size-body); line-height: 1.75; color: var(--nb-text-main); margin: 0 0 var(--nb-space-3); }
.nb .p-lead   { font-size: var(--nb-size-lead); line-height: var(--nb-line-lead); font-weight: var(--nb-weight-medium); color: var(--nb-text-main); }
.nb .p-muted, .nb-muted { color: var(--nb-text-muted); }
.nb .text-gold { color: var(--nb-gold); -webkit-text-fill-color: var(--nb-gold); }

.nb a { color: inherit; text-decoration: none; transition: color .2s var(--nb-ease-smooth); }
.nb a:hover { color: var(--nb-gold); }

.nb code, .nb .mono { font-family: var(--nb-font-mono); font-size: 0.9em; }

/* Gold gradient primary button — the signature CTA (design system default) */
.nb-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-1);
    padding: 1rem 2rem; font: var(--nb-weight-semi) 1rem/1 var(--nb-font-sans);
    background: var(--nb-gradient-gold); color: var(--nb-text-on-gold);
    border: none; border-radius: var(--nb-radius-md); cursor: pointer;
    box-shadow: var(--nb-shadow-gold-sm);
    transition: transform .2s var(--nb-ease-out), box-shadow .3s var(--nb-ease-smooth);
}
.nb-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--nb-shadow-gold); }
.nb-btn-primary:active { transform: translateY(0); box-shadow: var(--nb-shadow-sm); }

/* ==========================================================================
   Primitive component CSS — Pasul 1.4
   All scoped under .nb to avoid bleeding into tenant/admin views
   ========================================================================== */

/* ─── Body reset (scoped) ────────────────────────────────────────────────── */
.nb {
    font-family: var(--nb-font-body, 'Inter', system-ui, -apple-system, sans-serif);
    background: var(--nb-bg-body);
    color: var(--nb-text-main);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}
.nb *, .nb *::before, .nb *::after { box-sizing: border-box; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.nb .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    background: var(--nb-gradient-gold);
    color: var(--nb-text-on-gold);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-family: var(--nb-font-body, 'Inter', system-ui, sans-serif);
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(255,215,0,0.25);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s var(--nb-ease-out, cubic-bezier(0.34,1.56,0.64,1)), box-shadow 0.25s ease;
}
.nb .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255,215,0,0.40);
    color: var(--nb-text-on-gold);
}
.nb .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(255,215,0,0.25);
}
.nb .btn-primary:disabled,
.nb .btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nb .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    background: transparent;
    border: 1px solid var(--nb-border-light);
    border-radius: 12px;
    color: var(--nb-text-main);
    font-weight: 700;
    font-family: var(--nb-font-body, 'Inter', system-ui, sans-serif);
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease;
}
.nb .btn-secondary:hover {
    border-color: var(--nb-border-gold);
    color: var(--nb-gold);
}
.nb .btn-secondary:disabled,
.nb .btn-secondary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nb .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--nb-text-muted);
    font-weight: 700;
    font-family: var(--nb-font-body, 'Inter', system-ui, sans-serif);
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s ease;
}
.nb .btn-ghost:hover {
    color: var(--nb-text-main);
}
.nb .btn-ghost:disabled,
.nb .btn-ghost[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.nb .card {
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-light);
    border-radius: 14px;
    padding: 16px;
}

.nb .card--hero {
    background: linear-gradient(135deg, rgba(255,215,0,0.06), transparent 60%), var(--nb-bg-surface);
    border: 1px solid var(--nb-border-gold);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(255,215,0,0.12);
    position: relative;
}

/* ─── Pill badges ────────────────────────────────────────────────────────── */

.nb .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background: rgba(255,255,255,0.06);
    color: var(--nb-text-muted);
}

.nb .pill--gold {
    background: var(--nb-gold);
    color: var(--nb-text-on-gold);
}

/* ─── Metric card ────────────────────────────────────────────────────────── */

.nb .metric-card {
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-light);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nb .metric-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--nb-text-secondary);
}

.nb .metric-card__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--nb-text-main);
    font-variant-numeric: tabular-nums;
}

/* ─── Slot row ───────────────────────────────────────────────────────────── */

.nb .slot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-light);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.nb .slot-row:hover {
    border-color: var(--nb-border-gold);
}

.nb .slot-row__time {
    min-width: 56px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--nb-text-main);
    flex-shrink: 0;
}

.nb .slot-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nb .slot-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nb-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nb .slot-row__meta {
    font-size: 12px;
    color: var(--nb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nb .slot-row__price {
    font-weight: 700;
    color: var(--nb-gold);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ─── Day strip ──────────────────────────────────────────────────────────── */

.nb .day-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.nb .day-strip::-webkit-scrollbar {
    display: none;
}

.nb .day-strip__day {
    flex-shrink: 0;
    min-width: 52px;
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--nb-bg-surface);
    border: 1px solid var(--nb-border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nb .day-strip__day:hover {
    border-color: var(--nb-border-gold);
}

.nb .day-strip__dow {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--nb-text-secondary);
    letter-spacing: 0.5px;
}

.nb .day-strip__dom {
    font-size: 18px;
    font-weight: 700;
    color: var(--nb-text-main);
    font-variant-numeric: tabular-nums;
}

.nb .day-strip__day.is-active {
    background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-dim));
    border-color: transparent;
}

.nb .day-strip__day.is-active .day-strip__dow {
    color: rgba(0,0,0,0.7);
}

.nb .day-strip__day.is-active .day-strip__dom {
    color: var(--nb-text-on-gold);
}


/* ==========================================================================
   Light theme overrides — gated behind [data-theme="light"]
   ========================================================================== */
[data-theme="light"] {
    /* ─── Core palette (light mode) ─────────────────────────── */
    --nb-bg-body:          #f5f5f0;   /* warm off-white page */
    --nb-bg-surface:       #ffffff;   /* white cards, sections */
    --nb-bg-surface-trans: rgba(255, 255, 255, 0.8);
    --nb-glass:            rgba(0, 0, 0, 0.03);

    /* gold brand kept identical across themes */
    --nb-gold:             #FFD700;
    --nb-gold-hover:       #E6C200;
    --nb-gold-dim:         #FDB931;
    --nb-gold-deep:        #F5AF3D;

    --nb-text-main:        #1f1f1f;
    --nb-text-muted:       #6b6b75;   /* WCAG AA on #f5f5f0 */
    --nb-text-secondary:   #52525b;
    --nb-text-on-gold:     #000000;

    --nb-border-light:     rgba(0, 0, 0, 0.10);
    --nb-border-gold:      rgba(255, 215, 0, 0.40);

    /* ─── Semantic (status) — darker for light bg contrast ─── */
    --nb-success:          #16a34a;
    --nb-warn:             #d97706;
    --nb-danger:           #dc2626;
    --nb-accent-violet:    #7c3aed;
    --nb-accent-indigo:    #4f46e5;

    /* ─── Legacy aliases ────────────────────────────────────── */
    --color-primary:         var(--nb-gold);
    --color-primary-hover:   var(--nb-gold-hover);
    --color-primary-text:    var(--nb-text-on-gold);
    --color-primary-rgb:     255, 215, 0;
    --color-primary-light:   rgba(255, 215, 0, 0.12);
    --color-primary-lighter: rgba(255, 215, 0, 0.06);

    --color-bg:              var(--nb-bg-body);
    --color-bg-body:         var(--nb-bg-body);
    --color-bg-surface:      var(--nb-bg-surface);
    --color-surface:         var(--nb-bg-surface);
    --color-glass:           var(--nb-glass);

    --color-text:            var(--nb-text-main);
    --color-text-main:       var(--nb-text-main);
    --color-text-muted:      var(--nb-text-muted);
    --color-text-secondary:  var(--nb-text-secondary);
    --color-text-on-gold:    var(--nb-text-on-gold);

    --color-border:          var(--nb-border-light);
    --color-border-light:    var(--nb-border-light);
    --color-border-gold:     var(--nb-border-gold);

    --color-success:         var(--nb-success);
    --color-warn:            var(--nb-warn);
    --color-warning:         var(--nb-warn);
    --color-danger:          var(--nb-danger);
    --color-error:           var(--nb-danger);

    /* ─── Gradients (adjusted for light bg) ─────────────────── */
    --nb-gradient-gold:          linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #F5AF3D 100%);
    --nb-gradient-gold-subtle:   linear-gradient(135deg, rgba(255,215,0,0.10) 0%, rgba(255,215,0,0.03) 100%);
    --nb-gradient-gold-wash:     linear-gradient(180deg, rgba(255,215,0,0.05) 0%, var(--nb-bg-surface) 100%);
    --nb-gradient-h1:            linear-gradient(135deg, #1f1f1f 0%, #52525b 100%);
    --nb-gradient-dark-fade:     linear-gradient(180deg, rgba(245,245,240,0) 0%, #f5f5f0 100%);
    --nb-gradient-violet:        linear-gradient(135deg, #7c3aed, #4f46e5);

    /* ─── Shadows (softer for light bg) ─────────────────────── */
    --nb-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --nb-shadow-md:
        0 1px 2px rgba(0,0,0,0.06),
        0 4px 8px rgba(0,0,0,0.08);
    --nb-shadow-lg:
        0 1px 2px rgba(0,0,0,0.06),
        0 4px 8px rgba(0,0,0,0.08),
        0 12px 24px rgba(0,0,0,0.10);
    --nb-shadow-xl:
        0 1px 3px rgba(0,0,0,0.06),
        0 8px 16px rgba(0,0,0,0.08),
        0 24px 48px rgba(0,0,0,0.12);
    --nb-shadow-gold:
        0 2px 4px rgba(255,215,0,0.15),
        0 8px 16px rgba(255,215,0,0.10),
        0 24px 48px rgba(255,215,0,0.08);
    --nb-shadow-gold-sm: 0 4px 12px rgba(255,215,0,0.15);
}

/* ─── Light theme: h1 gradient kept dark-on-light readable ─── */
[data-theme="light"] .nb h1, [data-theme="light"] h1.nb {
    background: linear-gradient(135deg, #1f1f1f 0%, #52525b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Light/Dark Theme Toggle — CSS Custom Properties
   Used by customer mobile inline styles via var(--*)
   ========================================================================== */
:root, [data-theme="dark"] {
  --bg: #050505;
  --surface: #0f0f10;
  --surface-2: #1a1a1c;
  --header-bg: rgba(5,5,5,0.95);
  --card: #0f0f10;
  --border: rgba(255,215,0,0.12);
  --border-strong: rgba(255,215,0,0.25);
  --text: #ffffff;
  --text-muted: #a1a1aa;
  --text-dim: #6b6b75;
  --accent: #FFD700;
  --accent-active: #FFD700;
  --overlay: rgba(0,0,0,0.5);
  --shadow: 0 4px 12px rgba(0,0,0,0.3);
  --input-bg: #0f0f10;
  --input-border: rgba(255,255,255,0.08);
  --danger: #EF4444;
  --success: #10B981;
  --info: #3B82F6;
}
[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --header-bg: rgba(255,255,255,0.95);
  --card: #ffffff;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);
  --text: #18181b;
  --text-muted: #52525b;
  --text-dim: #71717a;
  --accent: #b88c00;
  --accent-active: #b88c00;
  --overlay: rgba(0,0,0,0.4);
  --shadow: 0 4px 12px rgba(0,0,0,0.06);
  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,0.15);
  --danger: #DC2626;
  --success: #059669;
  --info: #2563EB;
}

/* ─── Light theme rebindings for --nb-* (trainer pages, design system) ─── */
[data-theme="light"] {
  --nb-bg-body: #fafafa;
  --nb-bg-surface: #ffffff;
  --nb-bg-surface-trans: rgba(255,255,255,0.8);
  --nb-glass: rgba(0,0,0,0.03);
  --nb-gold: #b88c00;
  --nb-gold-hover: #a07a00;
  --nb-gold-dim: #b88c00;
  --nb-gold-deep: #a07a00;
  --nb-text-main: #18181b;
  --nb-text-muted: #52525b;
  --nb-text-secondary: #71717a;
  --nb-text-on-gold: #ffffff;
  --nb-border-light: rgba(0,0,0,0.08);
  --nb-border-gold: rgba(0,0,0,0.15);
  --nb-success: #059669;
  --nb-warn: #d97706;
  --nb-danger: #DC2626;
  --color-primary-rgb: 184, 140, 0;
}