/* ============================================================ tokens.css — bdPilates design tokens (single source of truth) Visual language: cream + mystical purple (member UI palette), applied globally to admin, guest, and member shells. Theme axis: data-bs-theme on (light | dark). Default is light cream; dark is a deepened plum / ink family. ============================================================ */ :root{ color-scheme: light; /* --- Cream surfaces ---------------------------------------- */ --bd-bg: #F5F2EB; --bd-surface: #FFFCF8; --bd-surface-2: #EFE9DF; --bd-surface-3: #E5DDD0; --bd-surface-inset: #F8F4ED; --bd-field-bg: #FFFFFF; --bd-field-bg-2: #F8F4ED; --bd-bg-rgb: 245, 242, 235; --bd-surface-rgb: 255, 252, 248; /* --- Text (plum ink) -------------------------------------- */ --bd-text: #2A2530; --bd-text-strong: #1A1620; --bd-muted: #6B6470; --bd-faint: #918A96; --bd-on-accent: #FFFFFF; --bd-text-rgb: 42, 37, 48; /* --- Borders ----------------------------------------------- */ --bd-border: rgba(42, 37, 48, 0.10); --bd-border-soft: rgba(42, 37, 48, 0.06); --bd-border-strong: rgba(42, 37, 48, 0.18); /* --- Mystical purple accent -------------------------------- */ --bd-accent: #7B5E8A; --bd-accent-rgb: 123, 94, 138; --bd-accent-hover: #634A72; --bd-accent-text: #4A3658; /* Dusty rose — secondary chart / soft accent */ --bd-rose: #C9959A; --bd-rose-rgb: 201, 149, 154; /* --- Status ------------------------------------------------ */ --bd-on-status: #FFFFFF; --bd-success: #4F7A55; --bd-success-rgb: 79, 122, 85; --bd-warning: #B8860B; --bd-warning-rgb: 184, 134, 11; --bd-danger: #B85C5C; --bd-danger-rgb: 184, 92, 92; --bd-info: #5A7A8A; --bd-info-rgb: 90, 122, 138; /* --- Spacing (4px base) ----------------------------------- */ --bd-space-0: 0px; --bd-space-1: 4px; --bd-space-2: 8px; --bd-space-3: 12px; --bd-space-4: 16px; --bd-space-5: 20px; --bd-space-6: 24px; --bd-space-7: 32px; --bd-space-8: 40px; /* --- Radius ------------------------------------------------ */ --bd-radius-1: 6px; --bd-radius-2: 10px; --bd-radius-3: 14px; --bd-radius-4: 20px; --bd-radius-pill: 999px; /* --- Borders width ---------------------------------------- */ --bd-border-w-1: 1px; --bd-border-w-2: 2px; /* --- Typography ------------------------------------------- */ --bd-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --bd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --bd-font-xs: 11.5px; --bd-font-sm: 13px; --bd-font-md: 14.5px; --bd-font-lg: 16px; --bd-font-xl: 19px; --bd-font-2xl: 23px; --bd-font-3xl: 30px; --bd-line-tight: 1.2; --bd-line-normal: 1.5; /* --- Elevation -------------------------------------------- */ --bd-shadow-1: 0 1px 2px rgba(42, 37, 48, .04), 0 1px 1px rgba(42, 37, 48, .03); --bd-shadow-2: 0 6px 20px rgba(42, 37, 48, .06), 0 1px 4px rgba(42, 37, 48, .04); --bd-shadow-3: 0 16px 40px rgba(42, 37, 48, .09), 0 2px 10px rgba(42, 37, 48, .04); --bd-shadow-strong: var(--bd-shadow-3); /* --- Motion ----------------------------------------------- */ --bd-ease-out: cubic-bezier(.16, 1, .3, 1); --bd-ease-in: cubic-bezier(.7, 0, .84, 0); --bd-ease-inout: cubic-bezier(.65, 0, .35, 1); --bd-duration-1: 120ms; --bd-duration-2: 180ms; --bd-duration-3: 240ms; /* --- Focus ------------------------------------------------- */ --bd-focus-ring: 0 0 0 3px rgba(var(--bd-accent-rgb), .28); --bd-focus-ring-strong: 0 0 0 4px rgba(var(--bd-accent-rgb), .38); /* --- Layout ----------------------------------------------- */ --bd-page-max: 1400px; --bd-control-h: 40px; --bd-tap: 44px; --bd-backdrop-blur: 12px; /* --- Atmosphere helpers ----------------------------------- */ --bd-hero-glow: rgba(var(--bd-accent-rgb), .12); --bd-hero-rose: rgba(var(--bd-rose-rgb), .10); /* --- Z layers --------------------------------------------- */ --bd-z-sticky: 50; --bd-z-header: 1020; --bd-z-toast: 1090; --bd-z-overlay: 1100; } /* ============================================================ Dark theme — deepened plum / mystical purple (same family) ============================================================ */ :root[data-bs-theme="dark"]{ color-scheme: dark; --bd-bg: #15131A; --bd-surface: #1D1A24; --bd-surface-2: #272330; --bd-surface-3: #322E3C; --bd-surface-inset: #100E14; --bd-field-bg: #100E14; --bd-field-bg-2: #272330; --bd-bg-rgb: 21, 19, 26; --bd-surface-rgb: 29, 26, 36; --bd-text: #EBE6F0; --bd-text-strong: #F7F4FA; --bd-muted: #A89BB0; --bd-faint: #7A6F86; --bd-on-accent: #120F18; --bd-text-rgb: 235, 230, 240; --bd-border: rgba(235, 230, 240, 0.12); --bd-border-soft: rgba(235, 230, 240, 0.07); --bd-border-strong: rgba(235, 230, 240, 0.22); --bd-accent: #B8A0C8; --bd-accent-rgb: 184, 160, 200; --bd-accent-hover: #CBB8D6; --bd-accent-text: #D6C8E0; --bd-rose: #D4A8AC; --bd-rose-rgb: 212, 168, 172; --bd-on-status: #0F1611; --bd-success: #6BC478; --bd-success-rgb: 107, 196, 120; --bd-warning: #D4A84B; --bd-warning-rgb: 212, 168, 75; --bd-danger: #D47A7A; --bd-danger-rgb: 212, 122, 122; --bd-info: #7A9AAC; --bd-info-rgb: 122, 154, 172; --bd-shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --bd-shadow-2: 0 8px 24px rgba(0, 0, 0, .40); --bd-shadow-3: 0 18px 44px rgba(0, 0, 0, .50); --bd-shadow-strong: var(--bd-shadow-3); --bd-hero-glow: rgba(var(--bd-accent-rgb), .16); --bd-hero-rose: rgba(var(--bd-rose-rgb), .10); } /* ============================================================ Legacy aliases ============================================================ */ :root{ --bd-primary: var(--bd-accent); --bd-primary-06: rgba(var(--bd-accent-rgb), .06); --bd-primary-12: rgba(var(--bd-accent-rgb), .12); --bd-primary-16: rgba(var(--bd-accent-rgb), .16); --bd-primary-18: rgba(var(--bd-accent-rgb), .18); --bd-primary-25: rgba(var(--bd-accent-rgb), .25); --bd-primary-35: rgba(var(--bd-accent-rgb), .35); --bd-primary-60: rgba(var(--bd-accent-rgb), .60); --bd-primary-70: rgba(var(--bd-accent-rgb), .70); --bd-border-2: var(--bd-border); --bd-border-3: var(--bd-border-strong); --bd-radius: var(--bd-radius-3); --bd-radius-sm: var(--bd-radius-2); --bd-shadow: var(--bd-shadow-2); --bd-transition: var(--bd-duration-2) var(--bd-ease-out); --bd-transition-fast: var(--bd-duration-1) var(--bd-ease-out); --bd-control-pad-y: var(--bd-space-2); --bd-control-pad-x: var(--bd-space-3); --bd-btn-pad-y: var(--bd-space-2); --bd-btn-pad-x: var(--bd-space-4); --bd-btn-sm-pad-y: 6px; --bd-btn-sm-pad-x: 10px; }