/* ========================================================================== 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-text: var(--nb-gold); /* auriu pentru TEXT; pe tema inchisa e acelasi, pe cea luminoasa se inchide (vezi mai jos) */ --nb-success-text: var(--success, #059669); /* verde pentru TEXT; pe tema inchisa ramane cum era */ --nb-gold-hover: #E6C200; --nb-gold-dim: #FDB931; /* mid gradient stop */ --nb-gold-deep: #F5AF3D; /* Aliases the skins expect. studio-atelier.css paints every primary CTA with `background: var(--gold-500) !important` and no fallback, while --gold-500 was only ever declared in tenant-forms.css — a stylesheet most pages never load. An undefined var makes the declaration invalid at computed-value time, so the background fell back to transparent while the ink stayed #18181b: a black button on a near-black bar, visible only on :hover, where that same skin does pass a fallback. Declared here so every consumer resolves it. */ --gold-500: var(--nb-gold); --gold-strong: var(--nb-gold-hover); --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; /* Auriul de brand ramane #b88c00 pentru fundaluri si accente, dar ca TEXT pe alb da doar 3.09:1 — sub pragul WCAG AA de 4.5:1 pentru text normal, deci preturile de 18px ingrosat de pe /customer/studio ieseau spalacite (masurat 18.09: 124 de elemente sub prag). Varianta de text da ~5:1 pe alb. Nu se foloseste pe suprafete care raman inchise si pe tema luminoasa (sidebar). */ --nb-gold-text: #8a6a00; /* verde lizibil ca text pe alb: #059669 da 3.61:1 la 18px, #047857 da ~5.4:1 */ --nb-success-text: #047857; --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; } /* alias: --nb-text-primary was used in 26 spots but never defined (typo for --nb-text-main) -> faint light fallback. Alias it so it flips with theme. */ :root{--nb-text-primary:var(--nb-text-main);} /* ── Auriu lizibil ca text, pe tema luminoasa (2026-09-18) ────────────────── Doar rolurile de text masurate pe /customer/studio, unde auriul sta pe fundal deschis. Fundalurile aurii si sidebarul (care ramane inchis si pe tema luminoasa) NU se ating: acolo #b88c00 are deja contrast bun. */ [data-theme="light"] .nb .slot-row__price, [data-theme="light"] .studio__service-price, [data-theme="light"] .studio__package-price, [data-theme="light"] .bento-kpi-value, [data-theme="light"] .bento-monthly-count, [data-theme="light"] .bento-streak-count { color: var(--nb-gold-text, #8a6a00); } /* Linkurile din skinul de client sunt aurii prin `body.nb a` din nexibook/customer-skin.css; pe fundal deschis dadeau tot 3.09:1 (masurat pe tile-urile de contact din /customer/studio, 12px). */ [data-theme="light"] body.nb a { color: var(--nb-gold-text, #8a6a00); } /* ── Calendar de client: contrast pe tema luminoasa (2026-09-18) ──────────── Regulile vin din