/* tokens/teglo.light.css — Phase 0 token foundation, theme layer -------------------------------------------------------------- Teglo brand, light mode. Accent shifts to a deeper green for contrast on light surfaces. Dark remains the default. Activated by: */ [data-theme="light"] { /* ───────────── Primitives ───────────── */ /* Surface */ --color-bg-base: #FAFAF9; --color-bg-surface: #FFFFFF; --color-bg-elevated: #FFFFFF; --color-bg-glass: rgba(0, 0, 0, 0.02); --color-bg-overlay: rgba(10, 11, 15, 0.4); /* Text */ --color-text: #0F172A; --color-text-secondary: #475569; --color-text-tertiary: #94A3B8; --color-text-inverse: #FFFFFF; --color-text-disabled: #CBD5E1; /* Border */ --color-border-subtle: rgba(0, 0, 0, 0.06); --color-border-default: rgba(0, 0, 0, 0.12); --color-border-strong: rgba(0, 0, 0, 0.2); /* Status */ --color-status-ok: #059669; --color-status-ok-bright: #10B981; --color-status-warn: #D97706; --color-status-warn-bright: #F59E0B; --color-status-danger: #DB2777; --color-status-danger-bright: #EC4899; --color-status-muted: #94A3B8; /* Accent — Teglo mint, deepened for light surfaces. */ --color-accent: #059669; --color-accent-bright: #10B981; --color-accent-soft: rgba(16, 185, 129, 0.08); --color-accent-rgb: 16, 185, 129; /* Shadow */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12); /* ───────────── Semantic layer ───────────── */ /* Accent compounds */ --accent: var(--color-accent); --accent-bright: var(--color-accent-bright); --accent-soft: var(--color-accent-soft); --accent-rgb: var(--color-accent-rgb); --accent-glow: rgba(var(--color-accent-rgb), 0.2); /* Surface compounds. In light mode --color-bg-surface and --color-bg-elevated collapse to the same white; --surface-card-bg-hover is therefore the same as the base card today. When the light palette gains a distinct elevated tint, this token will start diverging without touching downstream consumers. */ --surface-page-bg: var(--color-bg-base); --surface-card-bg: var(--color-bg-surface); --surface-card-bg-hover: var(--color-bg-elevated); --surface-card-border: var(--color-border-subtle); --surface-raised-bg: var(--color-bg-elevated); --surface-input-bg: var(--color-bg-surface); --surface-input-border: var(--color-border-default); --surface-modal-bg: var(--color-bg-elevated); --surface-modal-overlay: var(--color-bg-overlay); --surface-glass-bg: var(--color-bg-glass); --surface-glass-border: var(--color-border-subtle); /* Text compounds */ --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-tertiary: var(--color-text-tertiary); --text-on-accent: var(--color-text-inverse); --text-disabled: var(--color-text-disabled); /* Focus compounds */ --focus-ring: var(--color-accent); --focus-ring-offset: var(--color-bg-base); --focus-ring-soft: var(--color-accent-soft); /* Status compounds */ --status-ok: var(--color-status-ok); --status-warn: var(--color-status-warn); --status-danger: var(--color-status-danger); --status-muted: var(--color-status-muted); }