/* * TherapyBuilt — tokens.css * * Structural design tokens: spacing, type scale, radius, shadow, layout. * Brand color tokens (--tb-*) are injected at runtime by TB_Style_Controller. * Never hardcode color values in component stylesheets — always use var(--tb-*). */ :root { /* Neutral primitives. Keep literal white/black centralized here so public * component CSS can remain token-driven even for overlays and media. */ --tb-white: #fff; --tb-black: #000; /* ------------------------------------------------------------------------- * Spacing scale * ------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ------------------------------------------------------------------------- * Typography scale * ------------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* ------------------------------------------------------------------------- * Border radius * ------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ------------------------------------------------------------------------- * Shadows * ------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04); /* ------------------------------------------------------------------------- * Layout * ------------------------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --section-padding-y: var(--space-20); --section-padding-x: var(--space-6); /* ------------------------------------------------------------------------- * Semantic status colors * Centralized here so availability, program, validation, and state badges * do not carry their own disconnected palette values. * ------------------------------------------------------------------------- */ --tb-status-success-text: #166534; --tb-status-success-bg: #dcfce7; --tb-status-success-bg-soft: rgba(220,252,231,.92); --tb-status-success-dot: #16a34a; --tb-status-warning-text: #854d0e; --tb-status-warning-bg: #fef9c3; --tb-status-warning-bg-soft: rgba(254,249,195,.95); --tb-status-warning-dot: #ca8a04; --tb-status-info-text: #075985; --tb-status-info-bg: #e0f2fe; --tb-status-info-bg-soft: rgba(224,242,254,.94); --tb-status-info-dot: #0284c7; --tb-status-danger-text: #991b1b; --tb-status-danger-bg: #fee2e2; --tb-status-danger-bg-soft: rgba(254,226,226,.94); --tb-status-danger-dot: #dc2626; --tb-status-accent-text: #6b21a8; --tb-status-accent-bg: #f3e8ff; --tb-status-accent-dot: #7c3aed; --tb-status-neutral-text: #475569; --tb-status-neutral-bg: #f1f5f9; --tb-status-neutral-bg-soft: rgba(241,245,249,.92); --tb-status-neutral-dot: #94a3b8; --tb-status-location-open-text: #226b3b; --tb-status-location-open-bg: #e9f7ed; --tb-status-location-closed-text: #80503c; --tb-status-location-closed-bg: #f8ede8; /* Status colors when badges sit on photographs/dark scrims. */ --tb-status-success-on-dark-text: #86efac; --tb-status-success-on-dark-bg: rgba(74,222,128,.16); --tb-status-success-on-dark-border: rgba(74,222,128,.30); --tb-status-success-on-dark-ring: rgba(74,222,128,.22); --tb-status-warning-on-dark-text: #fde047; --tb-status-warning-on-dark-bg: rgba(250,204,21,.14); --tb-status-warning-on-dark-border: rgba(250,204,21,.28); --tb-status-warning-on-dark-ring: rgba(250,204,21,.20); --tb-status-info-on-dark-text: #bae6fd; --tb-status-info-on-dark-bg: rgba(56,189,248,.14); --tb-status-info-on-dark-border: rgba(56,189,248,.28); --tb-status-danger-on-dark-text: #fecaca; --tb-status-danger-on-dark-bg: rgba(248,113,113,.12); --tb-status-danger-on-dark-border: rgba(248,113,113,.24); --tb-status-accent-on-dark-text: #ddd6fe; --tb-status-accent-on-dark-bg: rgba(167,139,250,.13); --tb-status-accent-on-dark-border: rgba(167,139,250,.25); --tb-status-neutral-on-dark-text: rgba(255,255,255,.58); --tb-status-neutral-on-dark-bg: rgba(255,255,255,.08); --tb-status-neutral-on-dark-border: rgba(255,255,255,.12); --tb-status-neutral-on-dark-dot: rgba(255,255,255,.38); /* ------------------------------------------------------------------------- * Transitions * ------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ------------------------------------------------------------------------- * Z-index scale * ------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-above: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; }