/* * tokens.css - Oxofoxo Design System * * Source of truth for ALL design decisions. * Component CSS files MUST consume from these tokens — never hardcode values. * * Theme switching: toggle [data-theme="dark"] on element. * Default is light mode. The :root selector defines light, [data-theme="dark"] overrides. */ :root { /* ===== Brand ===== */ --brand-lime: #97C459; --brand-lime-light: #C0DD97; --brand-lime-dark: #7AAB42; --brand-lime-active: #639922; --brand-lime-on: #173404; /* ===== Backgrounds (light) ===== */ --bg-primary: #FFFFFF; --bg-secondary: #F8F8F6; --bg-tertiary: #F1EFE8; --bg-inverse: #1A1A1A; /* ===== Text (light) ===== */ --text-primary: #1A1A1A; --text-secondary: #5F5E5A; --text-tertiary: #888780; --text-inverse: #F5F5F5; --text-on-accent: var(--brand-lime-on); --text-link: var(--brand-lime-active); --text-link-hover: var(--brand-lime-dark); /* ===== Borders (light) ===== */ --border-subtle: #E5E5E0; --border-default: #D3D1C7; --border-strong: #B4B2A9; --border-accent: var(--brand-lime); /* ===== Semantic (light) ===== */ --danger: #A32D2D; --danger-bg: #FCEBEB; --danger-border: #F09595; --success: #3B6D11; --success-bg: #EAF3DE; --warning: #BA7517; --warning-bg: #FAEEDA; --info: #185FA5; --info-bg: #E6F1FB; } [data-theme="dark"] { /* ===== Backgrounds (dark) ===== */ --bg-primary: #1A1A1A; --bg-secondary: #242422; --bg-tertiary: #2C2C2A; --bg-inverse: #FFFFFF; /* ===== Text (dark) ===== */ --text-primary: #F5F5F5; --text-secondary: #B4B2A9; --text-tertiary: #888780; --text-inverse: #1A1A1A; /* ===== Borders (dark) ===== */ --border-subtle: #2C2C2A; --border-default: #3F3F3D; --border-strong: #5F5E5A; /* ===== Semantic (dark) - shifted for contrast ===== */ --danger: #F09595; --danger-bg: #501313; --danger-border: #A32D2D; --success: #C0DD97; --success-bg: #173404; --warning: #FAC775; --warning-bg: #412402; --info: #85B7EB; --info-bg: #042C53; } /* ============================================================================ * Typography * ============================================================================ * Inter loaded via Google Fonts (see index.html ). * Falls back gracefully to system fonts if CDN fails. */ :root { --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Sizes */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; /* Line heights — looser for body, tighter for headings */ --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Weights — Inter offers 100-900, we use 5 */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing — tighter for large text, normal for body */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; } /* ============================================================================ * Spacing — 8px grid * ============================================================================ * Use these for margin, padding, and gap. Avoid arbitrary values. */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; } /* ============================================================================ * Border radius * ============================================================================ */ :root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; } /* ============================================================================ * Transitions * ============================================================================ * Standardized timing. Use --transition-base for most interactions. * Always set transition-property explicitly — never use 'all' (perf cost). */ :root { --transition-fast: 100ms ease-out; --transition-base: 150ms ease-out; --transition-slow: 250ms ease-out; --easing-snappy: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 1ms; --transition-base: 1ms; --transition-slow: 1ms; } } /* ============================================================================ * Focus rings (accessibility — non-negotiable) * ============================================================================ * Use box-shadow instead of outline for better border-radius support. * The accent ring is for inputs/buttons; the danger ring is for errors. */ :root { --ring-accent: 0 0 0 3px rgba(151, 196, 89, 0.35); --ring-danger: 0 0 0 3px rgba(163, 45, 45, 0.35); --ring-neutral: 0 0 0 3px rgba(95, 94, 90, 0.25); } [data-theme="dark"] { --ring-accent: 0 0 0 3px rgba(151, 196, 89, 0.5); --ring-danger: 0 0 0 3px rgba(240, 149, 149, 0.4); --ring-neutral: 0 0 0 3px rgba(180, 178, 169, 0.25); } /* ============================================================================ * Layout constraints * ============================================================================ */ :root { --max-width-form: 400px; --max-width-content: 720px; --max-width-page: 1200px; } /* ============================================================================ * Z-index scale (semantic — never use raw numbers in component CSS) * ============================================================================ */ :root { --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; }