/* ============================================================================ * Brassicum design tokens — CSS custom properties * v1.0.0 · light + dark · LTR + RTL * * Usage: * (or data-theme="dark") * * All semantic tokens (surface.*, text.*, border.*, interactive.*, status.*) * are theme-aware. Foundation, typography, spacing, radius and z-index are * theme-agnostic and live on :root. * ========================================================================== */ :root { /* ── Foundation · color ──────────────────────────────────────────────── */ --bx-color-ink: #0F1A2E; --bx-color-ink-2: #1A2640; --bx-color-ink-3: #2A3656; --bx-color-night: #0A0E14; --bx-color-night-2: #11161F; --bx-color-night-3: #1A2030; --bx-color-cream: #F5F1E8; --bx-color-cream-2: #ECE5D2; --bx-color-paper: #FAF7EE; --bx-color-bone: #E8E1CD; --bx-color-white: #FFFFFF; --bx-color-jade: #0D6E5A; --bx-color-jade-2: #0F8470; --bx-color-jade-deep: #08453A; --bx-color-jade-soft: #C9DDD5; --bx-color-gold: #B8962E; --bx-color-gold-2: #D4B14A; --bx-color-gold-soft: #E8DAB0; --bx-color-mod-broccoli: #0D6E5A; --bx-color-mod-mustard: #B87A2E; --bx-color-mod-arugula: #2E5D3A; --bx-color-mod-kale: #3B5A6B; /* ── Typography ──────────────────────────────────────────────────────── */ --bx-font-latin: "Geist", "Neue Haas Grotesk", "Aktiv Grotesk", -apple-system, sans-serif; --bx-font-arabic: "Tajawal", "Almarai", system-ui, sans-serif; --bx-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; --bx-fw-regular: 400; --bx-fw-medium: 500; --bx-fw-semibold: 600; /* size · line-height · tracking */ --bx-fs-display: 56px; --bx-lh-display: 1.05; --bx-tr-display: -0.025em; --bx-fs-h1: 40px; --bx-lh-h1: 1.1; --bx-tr-h1: -0.02em; --bx-fs-h2: 28px; --bx-lh-h2: 1.2; --bx-tr-h2: -0.015em; --bx-fs-h3: 20px; --bx-lh-h3: 1.3; --bx-tr-h3: -0.01em; --bx-fs-body-lg: 17px; --bx-lh-body-lg: 1.6; --bx-fs-body: 15px; --bx-lh-body: 1.6; --bx-fs-body-sm: 14px; --bx-lh-body-sm: 1.55; --bx-fs-label: 12px; --bx-lh-label: 1.4; --bx-fs-caption: 11px; --bx-lh-caption: 1.4; --bx-fs-mono: 12px; --bx-lh-mono: 1.4; --bx-fs-overline: 11px; --bx-lh-overline: 1.2; --bx-tr-overline: 0.08em; /* ── Spacing scale (φ-leaning rhythm) ────────────────────────────────── */ --bx-space-0: 0px; --bx-space-1: 4px; --bx-space-2: 8px; --bx-space-3: 12px; --bx-space-4: 16px; --bx-space-5: 24px; --bx-space-6: 32px; --bx-space-7: 48px; --bx-space-8: 64px; --bx-space-9: 96px; /* ── Radius ──────────────────────────────────────────────────────────── */ --bx-radius-none: 0px; --bx-radius-xs: 2px; --bx-radius-sm: 4px; /* default */ --bx-radius-md: 8px; --bx-radius-lg: 10px; --bx-radius-pill: 999px; /* ── Z-index ─────────────────────────────────────────────────────────── */ --bx-z-base: 0; --bx-z-raised: 10; --bx-z-sticky: 100; --bx-z-drawer: 800; --bx-z-overlay: 900; --bx-z-modal: 1000; --bx-z-popover: 1100; --bx-z-tooltip: 1200; --bx-z-toast: 1300; --bx-z-max: 9999; /* ── Motion ──────────────────────────────────────────────────────────── */ --bx-duration-instant: 80ms; --bx-duration-fast: 150ms; --bx-duration-base: 200ms; --bx-duration-slow: 320ms; --bx-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --bx-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); --bx-ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1); } /* ── Theme · light (default) ─────────────────────────────────────────────── */ :root, [data-theme="light"] { --bx-surface-bg: #F5F1E8; --bx-surface-surface: #FAF7EE; --bx-surface-raised: #FFFFFF; --bx-surface-overlay: rgba(15, 26, 46, 0.55); --bx-border-subtle: #ECE5D2; --bx-border: #D8D0B8; --bx-border-strong: #A09680; --bx-border-focus: #B8962E; --bx-text: #0F1A2E; --bx-text-2: #3A4358; --bx-text-muted: #524D42; --bx-text-disabled: #A09680; --bx-text-inverse: #F5F1E8; --bx-text-link: #0D6E5A; --bx-interactive-primary: #0D6E5A; --bx-interactive-primary-hover: #0F8470; --bx-interactive-primary-active: #08453A; --bx-status-positive: #2F8A6A; --bx-status-negative: #B04A3F; --bx-status-warning: #B8862E; --bx-status-info: #3B6A8B; --bx-status-positive-bg: #D9E8DF; --bx-status-negative-bg: #F0DAD4; --bx-status-warning-bg: #F0E1B8; --bx-status-info-bg: #D6E0E8; --bx-shadow-xs: 0 1px 2px 0 rgba(15, 26, 46, 0.06); --bx-shadow-sm: 0 2px 6px -2px rgba(15, 26, 46, 0.10); --bx-shadow-md: 0 6px 16px -6px rgba(15, 26, 46, 0.14); --bx-shadow-lg: 0 12px 32px -12px rgba(15, 26, 46, 0.20); --bx-shadow-xl: 0 24px 56px -16px rgba(15, 26, 46, 0.24); --bx-shadow-focus: 0 0 0 2px rgba(184, 150, 46, 0.25); --bx-shadow-inset: inset 0 1px 0 0 rgba(15, 26, 46, 0.04); } /* ── Theme · dark ────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bx-surface-bg: #0A0E14; --bx-surface-surface: #11161F; --bx-surface-raised: #1A2030; --bx-surface-overlay: rgba(0, 0, 0, 0.65); --bx-border-subtle: #1A2030; --bx-border: #2A3656; --bx-border-strong: #3A4358; --bx-border-focus: #D4B14A; --bx-text: #F5F1E8; --bx-text-2: #C4C8D2; --bx-text-muted: #8A8F9A; --bx-text-disabled: #4A5160; --bx-text-inverse: #0F1A2E; --bx-text-link: #0F8470; --bx-interactive-primary: #0F8470; --bx-interactive-primary-hover: #13A088; --bx-interactive-primary-active: #0B5E50; --bx-status-positive: #3FA17F; --bx-status-negative: #C76558; --bx-status-warning: #D4B14A; --bx-status-info: #5489AA; --bx-status-positive-bg: #142824; --bx-status-negative-bg: #2A1714; --bx-status-warning-bg: #2A2210; --bx-status-info-bg: #142028; --bx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40); --bx-shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.45); --bx-shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.55); --bx-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, 0.65); --bx-shadow-xl: 0 24px 56px -16px rgba(0, 0, 0, 0.75); --bx-shadow-focus: 0 0 0 2px rgba(212, 177, 74, 0.25); --bx-shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.04); } /* ── Auto-dark · respect system preference when no data-theme is set ─────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bx-surface-bg: #0A0E14; --bx-surface-surface: #11161F; --bx-surface-raised: #1A2030; --bx-surface-overlay: rgba(0, 0, 0, 0.65); --bx-border-subtle: #1A2030; --bx-border: #2A3656; --bx-border-strong: #3A4358; --bx-border-focus: #D4B14A; --bx-text: #F5F1E8; --bx-text-2: #C4C8D2; --bx-text-muted: #8A8F9A; --bx-text-disabled: #4A5160; --bx-text-inverse: #0F1A2E; --bx-text-link: #0F8470; --bx-interactive-primary: #0F8470; --bx-interactive-primary-hover: #13A088; --bx-interactive-primary-active: #0B5E50; --bx-status-positive: #3FA17F; --bx-status-negative: #C76558; --bx-status-warning: #D4B14A; --bx-status-info: #5489AA; --bx-status-positive-bg: #142824; --bx-status-negative-bg: #2A1714; --bx-status-warning-bg: #2A2210; --bx-status-info-bg: #142028; --bx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40); --bx-shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.45); --bx-shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.55); --bx-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, 0.65); --bx-shadow-xl: 0 24px 56px -16px rgba(0, 0, 0, 0.75); --bx-shadow-focus: 0 0 0 2px rgba(212, 177, 74, 0.25); --bx-shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.04); } }