/* ============================================================================ ORA TOKEN SYSTEM — LAYER 2 LIGHT (Teglo v1 vertical — light theme) ============================================================================ Source of truth : Token System Foundation Entity Home https://www.notion.so/35f81404729f81859b73ed529ad66a9a Companions : tokens.base.css (Layer 1 — primitives) tokens.teglo.dark.css (Layer 2 — dark theme) Version : v1.0.1 (palette lock — 13 May 2026) Phase : 1 — clean extraction, structural only, NO value changes Activation : Same structure as tokens.teglo.dark.css with light-theme values. Per- vertical accent overrides apply equally in dark + light mode (see README.md). CANONICAL INTEGRATION RULE: every integration renders in var(--accent). Provider-specific colour tokens are LEGACY (see deprecation block below). ============================================================================ */ [data-theme="light"] { /* ── BACKGROUNDS ───────────────────────────────────────────────────────── */ --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; /* ── BORDERS ───────────────────────────────────────────────────────────── */ --color-border-subtle: rgba(0, 0, 0, 0.06); --color-border-default: rgba(0, 0, 0, 0.12); --color-border-focus: var(--color-accent); --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 (VERTICAL-OVERRIDABLE) ─────────────────────────────────────── */ /* Teglo default light: emerald #059669. Each vertical may carry distinct light + dark accent values (see README). The global --accent alias lives in tokens.base.css; --accent-rgb is per-theme (Phase 1.5 fix). */ --color-accent: #059669; --color-accent-bright: #10B981; --color-accent-soft: rgba(16, 185, 129, 0.08); --accent-rgb: 16, 185, 129; --accent-glow: rgba(var(--accent-rgb), 0.2); --accent-bg: var(--color-accent-soft); --accent-subtle: var(--color-accent-soft); /* ── SHADOWS ───────────────────────────────────────────────────────────── */ --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); --shadow-glow-ok: 0 0 24px rgba(16, 185, 129, 0.15); --shadow-glow-accent: 0 0 24px rgba(16, 185, 129, 0.2); /* ── INFO TIER (no canonical equivalent — kept) ────────────────────────── */ --info: #2563EB; --info-bg: rgba(37, 99, 235, 0.08); --info-border: rgba(37, 99, 235, 0.2); /* ── SCROLLBAR (no canonical equivalent — kept) ────────────────────────── */ --scrollbar-track: #f5f6f8; --scrollbar-thumb: rgba(13, 17, 23, 0.15); /* ──────────────────────────────────────────────────────────────────────── SEMANTIC LAYER 1.5 — compounds consume these, not colour primitives ──────────────────────────────────────────────────────────────────────── See tokens.teglo.dark.css for full rationale. Same twelve tokens with same RHS — lazy var() evaluation picks up the light-theme colour primitives at the use-site. ────────────────────────────────────────────────────────────────────── */ --surface-card-bg: var(--color-bg-surface); --surface-card-bg-hover: var(--color-bg-elevated); --surface-card-border: var(--color-border-subtle); --surface-input-bg: var(--color-bg-base); --surface-input-border: var(--color-border-default); --surface-input-border-focus: var(--color-border-focus); --surface-input-bg-disabled: var(--color-bg-surface); --surface-modal-bg: var(--color-bg-elevated); --surface-modal-overlay: var(--color-bg-overlay); --focus-ring: 0 0 0 2px var(--color-accent); --focus-ring-offset: 2px; --focus-ring-color: var(--color-accent); /* ──────────────────────────────────────────────────────────────────────── LEGACY ALIASES — surface, text, border, status ────────────────────────────────────────────────────────────────────── */ --bg: var(--color-bg-base); --surface: var(--color-bg-surface); --surface-hover: var(--color-bg-elevated); --surface-raised: var(--color-bg-elevated); --text: var(--color-text); --text-secondary: var(--color-text-secondary); --text-tertiary: var(--color-text-tertiary); --text-on-accent: var(--color-text-inverse); --border: var(--color-border-default); --border-subtle: var(--color-border-subtle); --glass-bg: var(--color-bg-glass); --glass-border: var(--color-border-subtle); --ok: var(--color-status-ok); --warn: var(--color-status-warn); --danger: var(--color-status-danger); --ok-bg: color-mix(in srgb, var(--color-status-ok) 15%, transparent); --warn-bg: color-mix(in srgb, var(--color-status-warn) 15%, transparent); --danger-bg: color-mix(in srgb, var(--color-status-danger) 15%, transparent); --ok-border: color-mix(in srgb, var(--color-status-ok) 30%, transparent); --warn-border: color-mix(in srgb, var(--color-status-warn) 30%, transparent); --danger-border: color-mix(in srgb, var(--color-status-danger) 30%, transparent); /* ──────────────────────────────────────────────────────────────────────── DEPRECATION ALIASES — broken refs (Phase 1 fix) ──────────────────────────────────────────────────────────────────────── Same names as dark theme; light values inherited via canonical token. */ --bg-elev: var(--color-bg-elevated); --fg-muted: var(--color-text-secondary); --text-primary: var(--color-text); --warning: var(--color-status-warn); /* ──────────────────────────────────────────────────────────────────────── LEGACY PROVIDER TOKENS — theme-scoped, @deprecated ──────────────────────────────────────────────────────────────────────── See tokens.teglo.dark.css for full rationale. Short-name aliases (--sonar, --whmcs, …) + their -rgb/-bg/-border/-light subsystems live in tokens.base.css (theme-agnostic in source). ────────────────────────────────────────────────────────────────────── */ --color-provider-sonar: #6366F1; /* @deprecated — use --accent */ --color-provider-whmcs: #0891B2; /* @deprecated — use --accent */ --color-provider-stripe: #7C3AED; /* @deprecated — use --accent */ }