/* * VENDORED COPY — do not edit this file directly. * Source: blackout-page/src/styles/design-system.css (the SPA's design token file). * Update by re-running: cp blackout-page/src/styles/design-system.css landing/design-system.css * Vendored so the landing page is self-contained and decoupled from the SPA build pipeline. */ /* * Copyright (c) 2025 Blackout Guild - Tibia * All Rights Reserved. * * PROPRIETARY AND CONFIDENTIAL * * This software is the proprietary information of Blackout Guild. * Unauthorized copying, modification, distribution, or use of this software, * via any medium, is strictly prohibited without the express written permission * of the copyright holder. * * For licensing inquiries, contact: blackoutguild@contact.com */ /** * ============================================================================= * BLACKOUT DESIGN SYSTEM v3 — CONSOLIDATED SINGLE SOURCE OF TRUTH * ============================================================================= * * This file REPLACES blackout-page/src/styles/design-system.css and makes the * "single source of truth" claim in docs/design-system/README.md actually true. * * It folds in every token that today lives in theme.css / global.css (so those * two files can be reduced to alias-only shims, then deleted), resolves the * value conflicts between them, and adds the v3 best-practice primitives: * • subtle-surface tokens (retire dark-mode-overrides.css) * • display type sizes + line-height + letter-spacing * • a single focus-ring token * • motion duration + easing tokens * * IMPORT ORDER: this must be the FIRST stylesheet imported in index.js, before * any component CSS, so every var() resolves to these values. * * CONFLICT RESOLUTIONS (see design-system.v3.MIGRATION.md for the why): * --border-radius-md : was 4px (theme/global) vs 6px (ds). → 6px (0.375rem) wins. * --border-radius-sm : was 2px vs 4px. → 4px (0.25rem) wins. * --shadow-sm : was 0 1px 3px/.08 (global). → 0 1px 2px/.05 (ds) wins. * font sizes : px (theme/global) vs rem (ds). → rem wins (scales w/ user zoom). * z-index : popover/tooltip differed by file. → ONE scale below, all names present. * --font-family-base : was -apple-system… (no Inter). → aliased to Inter sans. * --member-bg etc. : standalone hexes. → aliased to --member-type-* tokens. */ :root { /* =========================================================================== 1 · COLOR PALETTE — full ramps (the ONLY place raw hex is allowed) =========================================================================== */ /* Primary — Blue */ --color-primary-50:#eff6ff; --color-primary-100:#dbeafe; --color-primary-200:#bfdbfe; --color-primary-300:#93c5fd; --color-primary-400:#60a5fa; --color-primary-500:#3b82f6; --color-primary-600:#2563eb; --color-primary-700:#1d4ed8; --color-primary-800:#1e40af; --color-primary-900:#1e3a8a; /* Success — Green */ --color-success-50:#ecfdf5; --color-success-100:#d1fae5; --color-success-200:#a7f3d0; --color-success-300:#6ee7b7; --color-success-400:#34d399; --color-success-500:#10b981; --color-success-600:#059669; --color-success-700:#047857; --color-success-800:#065f46; --color-success-900:#064e3b; /* Warning — Amber */ --color-warning-50:#fffbeb; --color-warning-100:#fef3c7; --color-warning-200:#fde68a; --color-warning-300:#fcd34d; --color-warning-400:#fbbf24; --color-warning-500:#f59e0b; --color-warning-600:#d97706; --color-warning-700:#b45309; --color-warning-800:#92400e; --color-warning-900:#78350f; /* Danger — Red */ --color-danger-50:#fef2f2; --color-danger-100:#fee2e2; --color-danger-200:#fecaca; --color-danger-300:#fca5a5; --color-danger-400:#f87171; --color-danger-500:#ef4444; --color-danger-600:#dc2626; --color-danger-700:#b91c1c; --color-danger-800:#991b1b; --color-danger-900:#7f1d1d; /* Gray */ --color-gray-50:#f9fafb; --color-gray-100:#f3f4f6; --color-gray-200:#e5e7eb; --color-gray-300:#d1d5db; --color-gray-400:#9ca3af; --color-gray-500:#6b7280; --color-gray-600:#4b5563; --color-gray-700:#374151; --color-gray-800:#1f2937; --color-gray-900:#111827; /* Gold */ --color-gold-50:#fefce8; --color-gold-100:#fef9c3; --color-gold-200:#fef08a; --color-gold-300:#fde047; --color-gold-400:#facc15; --color-gold-500:#eab308; --color-gold-600:#ca8a04; --color-gold-700:#a16207; --color-gold-800:#854d0e; --color-gold-900:#713f12; /* Teal */ --color-teal-50:#f0fdfa; --color-teal-100:#ccfbf1; --color-teal-200:#99f6e4; --color-teal-300:#5eead4; --color-teal-400:#2dd4bf; --color-teal-500:#14b8a6; --color-teal-600:#0d9488; --color-teal-700:#0f766e; --color-teal-800:#115e59; --color-teal-900:#134e4a; /* Orange */ --color-orange-50:#fff7ed; --color-orange-100:#ffedd5; --color-orange-200:#fed7aa; --color-orange-300:#fdba74; --color-orange-400:#fb923c; --color-orange-500:#f97316; --color-orange-600:#ea580c; --color-orange-700:#c2410c; --color-orange-800:#9a3412; --color-orange-900:#7c2d12; /* Purple — CANONICAL premium/voucher hue. Legacy #805ad5 secondary is folded in below. */ --color-purple-50:#faf5ff; --color-purple-100:#f3e8ff; --color-purple-200:#e9d5ff; --color-purple-300:#d8b4fe; --color-purple-400:#c084fc; --color-purple-500:#a855f7; --color-purple-600:#9333ea; --color-purple-700:#7c3aed; --color-purple-800:#6b21a8; --color-purple-900:#581c87; /* --- Family de-duplication (was: a 2nd green @ #22c55e and a 2nd purple @ #805ad5) --- Keep the alias names so existing consumers compile, but point them at the canonical ramp so the UI can't drift into two greens / three purples. */ --color-blue-50:var(--color-primary-50); --color-blue-100:var(--color-primary-100); --color-blue-200:var(--color-primary-200); --color-blue-300:var(--color-primary-300); --color-blue-400:var(--color-primary-400); --color-blue-500:var(--color-primary-500); --color-blue-600:var(--color-primary-600); --color-blue-700:var(--color-primary-700); --color-blue-800:var(--color-primary-800); --color-blue-900:var(--color-primary-900); --color-red-50:var(--color-danger-50); --color-red-100:var(--color-danger-100); --color-red-200:var(--color-danger-200); --color-red-300:var(--color-danger-300); --color-red-400:var(--color-danger-400); --color-red-500:var(--color-danger-500); --color-red-600:var(--color-danger-600); --color-red-700:var(--color-danger-700); --color-red-800:var(--color-danger-800); --color-red-900:var(--color-danger-900); /* green-* now aliases success-* (was its own #22c55e ramp — the doc's "near-alias") */ --color-green-50:var(--color-success-50); --color-green-100:var(--color-success-100); --color-green-200:var(--color-success-200); --color-green-300:var(--color-success-300); --color-green-400:var(--color-success-400); --color-green-500:var(--color-success-500); --color-green-600:var(--color-success-600); --color-green-700:var(--color-success-700); --color-green-800:var(--color-success-800); --color-green-900:var(--color-success-900); /* yellow-* aliases gold-* */ --color-yellow-50:var(--color-gold-50); --color-yellow-100:var(--color-gold-100); --color-yellow-200:var(--color-gold-200); --color-yellow-300:var(--color-gold-300); --color-yellow-400:var(--color-gold-400); --color-yellow-500:var(--color-gold-500); --color-yellow-600:var(--color-gold-600); --color-yellow-700:var(--color-gold-700); --color-yellow-800:var(--color-gold-800); --color-yellow-900:var(--color-gold-900); /* =========================================================================== 2 · SEMANTIC COLORS — LIGHT (the only layer components should consume) =========================================================================== */ --bg-primary:#ffffff; --bg-secondary:var(--color-gray-50); --bg-tertiary:var(--color-gray-100); --bg-inverse:var(--color-gray-900); --surface-primary:#ffffff; --surface-secondary:var(--color-gray-50); --surface-elevated:#ffffff; --surface-overlay:rgba(0,0,0,.5); --surface-hover:var(--color-gray-100); /* NEW in :root — light was missing this */ --surface-raised:rgba(0,0,0,.02); /* NEW — faint raised overlay (footers, active rows) */ --text-primary:var(--color-gray-900); --text-secondary:var(--color-gray-600); --text-tertiary:var(--color-gray-500); --text-disabled:var(--color-gray-400); --text-inverse:#ffffff; --text-link:var(--color-primary-600); --text-link-hover:var(--color-primary-700); --border-primary:var(--color-gray-200); --border-secondary:var(--color-gray-300); --border-focus:var(--color-primary-500); --border-error:var(--color-danger-500); --interactive-primary:var(--color-primary-600); --interactive-primary-hover:var(--color-primary-700); --interactive-primary-active:var(--color-primary-800); --interactive-success:var(--color-success-600); --interactive-success-hover:var(--color-success-700); --interactive-danger:var(--color-danger-600); --interactive-danger-hover:var(--color-danger-700); --interactive-warning:var(--color-warning-600); --interactive-warning-hover:var(--color-warning-700); /* --------------------------------------------------------------------------- 2b · SUBTLE-SURFACE TOKENS ★ the fix that retires dark-mode-overrides.css ★ One token per tinted state. Components reference these instead of pinning --color-*-50/-100. They flip in the dark block below, so dark "just works". Example: .active-tile.expiring { background: var(--surface-danger-subtle); color: var(--surface-danger-text); } --------------------------------------------------------------------------- */ --surface-success-subtle:var(--color-success-50); --surface-success-text:var(--color-success-700); --surface-success-border:var(--color-success-200); --surface-danger-subtle:var(--color-danger-50); --surface-danger-text:var(--color-danger-700); --surface-danger-border:var(--color-danger-200); --surface-warning-subtle:var(--color-warning-50); --surface-warning-text:var(--color-warning-800); --surface-warning-border:var(--color-warning-200); --surface-info-subtle:var(--color-primary-50); --surface-info-text:var(--color-primary-700); --surface-info-border:var(--color-primary-200); --surface-voucher-subtle:var(--color-purple-50); --surface-voucher-text:var(--color-purple-700); --surface-voucher-border:var(--color-purple-200); --surface-neutral-subtle:var(--color-gray-100); --surface-neutral-text:var(--color-gray-700); --surface-neutral-border:var(--color-gray-200); --surface-gold-subtle:var(--color-gold-100); --surface-gold-text:var(--color-gold-700); --surface-gold-border:var(--color-gold-200); --surface-gold-glow:rgba(234,179,8,.3); /* Theme-aware STATE-TINT GRADIENTS (#852) — active-tile + respawn-row state washes. Flip per theme so new tinted surfaces need no dark-mode-specific CSS. */ --gradient-active-voucher:linear-gradient(180deg, var(--color-purple-50) 0%, var(--surface-primary) 60%); --gradient-active-expiring:linear-gradient(180deg, var(--color-danger-50) 0%, var(--surface-primary) 60%); --gradient-active-paused:linear-gradient(180deg, var(--color-warning-50) 0%, var(--surface-primary) 60%); --gradient-row-voucher:linear-gradient(180deg, var(--color-purple-50), transparent 80%); --gradient-row-expiring:linear-gradient(180deg, var(--color-danger-50), transparent 80%); /* =========================================================================== 3 · MEMBER-TYPE COLORS (canonical) + legacy aliases =========================================================================== */ --member-type-member-bg:var(--color-primary-100); --member-type-member-text:var(--color-primary-700); --member-type-member-border:var(--color-primary-200); --member-type-elite-bg:var(--color-danger-100); --member-type-elite-text:var(--color-danger-700); --member-type-elite-border:var(--color-danger-200); --member-type-vice-bg:var(--color-warning-100); --member-type-vice-text:var(--color-warning-800); --member-type-vice-border:var(--color-warning-200); --member-type-veteran-bg:var(--color-success-100); --member-type-veteran-text:var(--color-success-700); --member-type-veteran-border:var(--color-success-200); /* Legacy names from theme.css / global.css — now point at the canonical tokens (was standalone #bfdbfe / #fef3c7 / #fecaca). Lets those files be deleted. */ --member-bg:var(--member-type-member-bg); --member-text:var(--member-type-member-text); --vice-bg:var(--member-type-vice-bg); --vice-text:var(--member-type-vice-text); --elite-bg:var(--member-type-elite-bg); --elite-text:var(--member-type-elite-text); /* =========================================================================== 4 · TYPOGRAPHY — one scale, rem-based (scales with user zoom) =========================================================================== */ --font-family-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-family-mono:'JetBrains Mono','Fira Code',monospace; --font-family-base:var(--font-family-sans); /* alias — heals theme/global consumers */ /* Compact text scale: badges, dense table metadata, mobile calendar labels. Keep intentionally below xs; do not use for icon-only sizing. */ --font-size-4xs:0.5rem; /* 8 */ --font-size-3xs:0.5625rem; /* 9 */ --font-size-2xs:0.625rem; /* 10 */ --font-size-compact:0.6875rem; /* 11 */ --font-size-compact-sm:0.8125rem; /* 13 */ --font-size-compact-md:0.84375rem;/* 13.5 */ --font-size-xs:0.75rem; /* 12 */ --font-size-sm:0.875rem; /* 14 */ --font-size-base:1rem; /* 16 */ --font-size-md:var(--font-size-base); /* alias — 40+ components use --font-size-md */ --font-size-lg:1.125rem; /* 18 */ --font-size-xl:1.25rem; /* 20 */ --font-size-2xl:1.5rem; /* 24 */ --font-size-3xl:1.875rem; /* 30 */ --font-size-4xl:2.25rem; /* 36 — NEW: page heroes / big stats */ --font-size-5xl:3rem; /* 48 — NEW: ranking podium numbers */ /* Icon glyph scale: use for emoji/SVG/font glyph sizing, not readable text. */ --icon-size-2xs:0.625rem; /* 10 */ --icon-size-md:1rem; /* 16 */ --icon-size-lg:1.25rem; /* 20 */ --icon-size-xl:1.5rem; /* 24 */ --icon-size-2xl:2rem; /* 32 */ --icon-size-hero:3rem; /* 48 */ --font-weight-normal:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700; /* NEW — vertical rhythm + tracking (were ad-hoc literals before) */ --line-height-none:1; /* icon buttons, counters, badges */ --line-height-tight:1.15; --line-height-compact:1.2; --line-height-snug:1.3; --line-height-dense:1.4; --line-height-normal:1.5; --line-height-comfortable:1.6; --line-height-relaxed:1.7; --letter-spacing-tight:-0.02em; --letter-spacing-heading:-0.01em; --letter-spacing-normal:0; --letter-spacing-wide:0.04em; --letter-spacing-label:0.05em; --letter-spacing-label-wide:0.06em; --letter-spacing-wider:0.08em; --letter-spacing-overline:0.1em; /* ALL-CAPS labels/eyebrows */ /* =========================================================================== 5 · SPACING — 0.25rem base (extended to match theme/global so all resolve) =========================================================================== */ --spacing-px:1px; --spacing-0:0; --spacing-0-5:0.125rem; --spacing-1:0.25rem; --spacing-1-5:0.375rem; --spacing-2:0.5rem; --spacing-2-5:0.625rem; --spacing-3:0.75rem; --spacing-3-5:0.875rem; --spacing-4:1rem; --spacing-5:1.25rem; --spacing-6:1.5rem; --spacing-7:1.75rem; --spacing-8:2rem; --spacing-9:2.25rem; --spacing-10:2.5rem; --spacing-12:3rem; --spacing-14:3.5rem; --spacing-16:4rem; --spacing-20:5rem; --spacing-24:6rem; --spacing-28:7rem; --spacing-32:8rem; --spacing-36:9rem; --spacing-40:10rem; /* =========================================================================== 6 · RADIUS — canonical (resolves the 4px-vs-6px conflict → 6px md) =========================================================================== */ --radius-sm:0.25rem; --radius-md:0.375rem; --radius-lg:0.5rem; --radius-xl:0.75rem; --radius-2xl:1rem; --radius-full:9999px; /* Legacy aliases → canonical (theme had md:0.25 / xl:1rem; global had md:4px — all now unified) */ --border-radius-sm:var(--radius-sm); --border-radius-md:var(--radius-md); --border-radius-lg:var(--radius-lg); --border-radius-xl:var(--radius-xl); --border-radius-2xl:var(--radius-2xl); --border-radius-full:var(--radius-full); /* =========================================================================== 7 · SHADOWS (ds set is canonical; extra names from global folded in) =========================================================================== */ --shadow-xs:0 1px 2px rgba(0,0,0,.05); --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05); --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06); --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05); --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25); --shadow-modal:0 10px 40px rgba(0,0,0,.3); --shadow-dropdown:0 4px 12px rgba(0,0,0,.15); --shadow-card:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06); --shadow-card-hover:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06); /* =========================================================================== 8 · FOCUS RING — one token, applied via :focus-visible everywhere =========================================================================== */ --focus-ring:0 0 0 3px color-mix(in srgb, var(--border-focus) 45%, transparent); --focus-ring-danger:0 0 0 3px color-mix(in srgb, var(--color-danger-500) 45%, transparent); --shadow-focus:var(--focus-ring); /* legacy alias */ /* =========================================================================== 9 · MOTION — durations + easing (replace hardcoded 0.2s ease) =========================================================================== */ --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms; --duration-slower:500ms; --ease-standard:cubic-bezier(.4,0,.2,1); --ease-emphasized:cubic-bezier(.2,0,0,1); --ease-decelerate:cubic-bezier(0,0,.2,1); --ease-accelerate:cubic-bezier(.4,0,1,1); --ease-exit:var(--ease-accelerate); --transition-fast:var(--duration-fast) var(--ease-standard); --transition-base:var(--duration-base) var(--ease-standard); --transition-all:all var(--duration-base) var(--ease-standard); --transition-colors:color var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard); --transition-opacity:opacity var(--duration-base) var(--ease-standard); --transition-transform:transform var(--duration-base) var(--ease-standard); --transition-shadow:box-shadow var(--duration-base) var(--ease-standard); /* =========================================================================== 10 · Z-INDEX — ONE canonical scale (all names present; order is what matters) =========================================================================== */ --z-dropdown:1000; --z-sticky:1020; --z-fixed:1030; --z-modal-backdrop:1040; --z-modal:1050; --z-modal-dropdown:1055; --z-popover:1060; --z-tooltip:1070; --z-toast:1080; --z-notification:1090; /* =========================================================================== 11 · LAYOUT · FORM · CARD · BREAKPOINTS =========================================================================== */ --sidebar-width:280px; --navbar-height:64px; --sidebar-bg:var(--surface-primary); --content-bg:var(--bg-secondary); --input-bg:var(--surface-primary); --input-border:1px solid var(--border-primary); --input-radius:var(--radius-md); --input-padding-x:var(--spacing-3); --input-padding-y:var(--spacing-2); --input-font-size:var(--font-size-sm); --card-bg:var(--surface-primary); --card-border:1px solid var(--border-primary); --card-radius:var(--radius-lg); --card-shadow:var(--shadow-card); --card-shadow-hover:var(--shadow-card-hover); --breakpoint-sm:480px; --breakpoint-md:768px; --breakpoint-lg:960px; --breakpoint-xl:1024px; --breakpoint-xxl:1200px; /* =========================================================================== 12 · LEGACY ALIASES (single-token names from very old CSS — keep last) =========================================================================== */ --color-primary:var(--color-primary-600); --color-primary-dark:var(--color-primary-700); --color-primary-light:var(--color-primary-500); --color-secondary:var(--color-purple-600); --color-secondary-dark:var(--color-purple-700); --color-secondary-light:var(--color-purple-500); /* was #805ad5 → folded into purple */ --color-success:var(--color-success-500); --color-success-dark:var(--color-success-600); --color-success-light:var(--color-success-400); --color-danger:var(--color-danger-500); --color-danger-dark:var(--color-danger-600); --color-danger-light:var(--color-danger-400); --color-warning:var(--color-warning-500); --color-warning-dark:var(--color-warning-600); --color-warning-light:var(--color-warning-400); --color-info:var(--color-primary-500); --color-info-dark:var(--color-primary-600); --color-info-light:var(--color-primary-400); --color-background:var(--bg-primary); --color-background-alt:var(--bg-secondary); --color-foreground:var(--text-primary); --color-white:#ffffff; /* --------------------------------------------------------------------------- 12b · LEGACY T-SHIRT / SINGLE-NAME ALIASES (#894) Heavily-used names inherited from the deleted theme.css / global.css that the v3 rewrite (#850) never re-mapped, so they were resolving to nothing at runtime (tickets / profile / Modal CSS). Mapped onto the canonical numeric/semantic tokens above so existing modules render correctly and flip with the theme. They reference semantic tokens (not raw ramp stops), so dark mode is inherited automatically. Retire as consuming modules migrate to the canonical names — tracked follow-ups #920 / #921. --------------------------------------------------------------------------- */ --spacing-xs:var(--spacing-1); --spacing-sm:var(--spacing-2); --spacing-md:var(--spacing-4); --spacing-lg:var(--spacing-6); --spacing-xl:var(--spacing-8); --spacing-xxl:var(--spacing-12); --primary-color:var(--color-primary-600); --primary-hover:var(--color-primary-700); --accent-primary:var(--color-primary-600); --surface-color:var(--surface-primary); --surface-tertiary:var(--bg-tertiary); --bg-surface:var(--surface-primary); --bg-card:var(--surface-primary); --bg-elevated:var(--surface-elevated); --border-color:var(--border-primary); --border-default:var(--border-primary); --border-subtle:var(--border-primary); --text-muted:var(--text-tertiary); --text-on-primary:var(--text-inverse); --error-color:var(--color-danger-600); --radius-xs:var(--radius-sm); --radius-pill:var(--radius-full); --font-mono:var(--font-family-mono); --font-size-xxl:var(--font-size-2xl); } /* ============================================================================= DARK MODE — semantic + subtle-surface tokens flip here. Keyed off BOTH [data-theme="dark"] and .dark (ThemeContext sets both). ============================================================================= */ .dark, [data-theme="dark"] { color-scheme:dark; --bg-primary:var(--color-gray-900); --bg-secondary:var(--color-gray-800); --bg-tertiary:var(--color-gray-700); --bg-inverse:#ffffff; --surface-primary:var(--color-gray-800); --surface-secondary:var(--color-gray-700); --surface-elevated:var(--color-gray-800); --surface-overlay:rgba(0,0,0,.7); --surface-hover:var(--color-gray-700); --surface-raised:rgba(255,255,255,.025); --text-primary:var(--color-gray-100); --text-secondary:var(--color-gray-300); --text-tertiary:var(--color-gray-400); --text-disabled:var(--color-gray-500); --text-inverse:var(--color-gray-900); --text-link:var(--color-primary-400); --text-link-hover:var(--color-primary-300); --border-primary:var(--color-gray-700); --border-secondary:var(--color-gray-600); --border-focus:var(--color-primary-400); --border-error:var(--color-danger-400); --interactive-primary:var(--color-primary-500); --interactive-primary-hover:var(--color-primary-400); --interactive-primary-active:var(--color-primary-300); --interactive-success:var(--color-success-500); --interactive-success-hover:var(--color-success-400); --interactive-danger:var(--color-danger-500); --interactive-danger-hover:var(--color-danger-400); --interactive-warning:var(--color-warning-500); --interactive-warning-hover:var(--color-warning-400); /* ★ subtle-surface tokens — dark recipe (rgba tint + lighter text). This block is what lets dark-mode-overrides.css be deleted family by family. */ --surface-success-subtle:rgba(16,185,129,.18); --surface-success-text:var(--color-success-300); --surface-success-border:rgba(16,185,129,.35); --surface-danger-subtle:rgba(239,68,68,.18); --surface-danger-text:var(--color-danger-300); --surface-danger-border:rgba(239,68,68,.35); --surface-warning-subtle:rgba(245,158,11,.18); --surface-warning-text:var(--color-warning-300); --surface-warning-border:rgba(245,158,11,.35); --surface-info-subtle:rgba(59,130,246,.18); --surface-info-text:var(--color-primary-300); --surface-info-border:rgba(59,130,246,.35); --surface-voucher-subtle:rgba(147,51,234,.18); --surface-voucher-text:var(--color-purple-300); --surface-voucher-border:rgba(147,51,234,.35); --surface-neutral-subtle:var(--color-gray-700);--surface-neutral-text:var(--color-gray-300); --surface-neutral-border:var(--color-gray-600); --surface-gold-subtle:rgba(234,179,8,.15); --surface-gold-text:var(--color-gold-400); --surface-gold-border:rgba(234,179,8,.35); --surface-gold-glow:rgba(234,179,8,.45); /* State-tint gradients — dark recipe (color-mix tint over the dark base) */ --gradient-active-voucher:linear-gradient(180deg, color-mix(in srgb, var(--color-purple-600) 14%, transparent) 0%, var(--color-gray-800) 70%); --gradient-active-expiring:linear-gradient(180deg, color-mix(in srgb, var(--color-danger-500) 16%, transparent) 0%, var(--color-gray-800) 70%); --gradient-active-paused:linear-gradient(180deg, color-mix(in srgb, var(--color-warning-500) 16%, transparent) 0%, var(--color-gray-800) 70%); --gradient-row-voucher:linear-gradient(180deg, color-mix(in srgb, var(--color-purple-600) 14%, transparent), transparent 80%); --gradient-row-expiring:linear-gradient(180deg, color-mix(in srgb, var(--color-danger-500) 16%, transparent), transparent 80%); /* Member-type — dark (rgba .35 bg + -200 text + -500 border for contrast) */ --member-type-member-bg:rgba(59,130,246,.35); --member-type-member-text:var(--color-primary-200); --member-type-member-border:var(--color-primary-500); --member-type-elite-bg:rgba(239,68,68,.35); --member-type-elite-text:var(--color-danger-200); --member-type-elite-border:var(--color-danger-500); --member-type-vice-bg:rgba(245,158,11,.35); --member-type-vice-text:var(--color-warning-200); --member-type-vice-border:var(--color-warning-500); --member-type-veteran-bg:rgba(16,185,129,.35); --member-type-veteran-text:var(--color-success-200); --member-type-veteran-border:var(--color-success-500); --sidebar-bg:var(--color-gray-800); --content-bg:var(--color-gray-900); --input-bg:var(--color-gray-700); --input-border:1px solid var(--border-primary); --shadow-card:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2); --shadow-card-hover:0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.2); --color-background:var(--bg-primary); --color-background-alt:var(--bg-secondary); --color-foreground:var(--text-primary); --color-white:var(--color-gray-100); } /* ============================================================================= GLOBAL FOCUS + REDUCED MOTION (move these out of global.css into the system) ============================================================================= */ :where(button,a,input,textarea,select,[tabindex],[role="button"]):focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }