/* ============================================================ Wird — Color System 4 named themes, each defining 7 semantic tokens. :root defaults to the Fajr theme (the app default). Switch themes with [data-theme="amber|layl|ivory"] on . ============================================================ */ :root, [data-theme="fajr"] { /* — Fajr (default) · deep navy, pre-dawn clarity — */ --color-background: #FAFAF8; --color-surface: #FFFFFF; --color-primary: #1A237E; --color-accent: #3949AB; --color-text: #1A1A2E; --color-text-secondary: #5E6173; /* darkened for WCAG AA on the cream background */ --color-checkmark: #3949AB; /* derived — primary at low alpha for rings, tints, pressed fills */ --color-primary-tint: rgba(26, 35, 126, 0.08); --color-primary-ring: rgba(26, 35, 126, 0.22); --color-accent-tint: rgba(57, 73, 171, 0.10); /* fixed across themes — destructive + on-color ink */ --color-danger: #D7263D; --color-on-primary: #FFFFFF; --color-on-accent: #FFFFFF; /* hairlines + separators (always derived from text @ low alpha) */ --color-separator: rgba(26, 26, 46, 0.08); --color-hairline: rgba(26, 26, 46, 0.06); color-scheme: light; } [data-theme="amber"] { /* — Amber · warm terracotta, morning-sun — */ --color-background: #FDFAF5; --color-surface: #FFFFFF; --color-primary: #BF360C; --color-accent: #E64A19; --color-text: #1C1410; --color-text-secondary: #9E7B6A; --color-checkmark: #E64A19; --color-primary-tint: rgba(191, 54, 12, 0.08); --color-primary-ring: rgba(191, 54, 12, 0.22); --color-accent-tint: rgba(230, 74, 25, 0.10); --color-danger: #D7263D; --color-on-primary: #FFFFFF; --color-on-accent: #FFFFFF; --color-separator: rgba(28, 20, 16, 0.08); --color-hairline: rgba(28, 20, 16, 0.06); color-scheme: light; } [data-theme="layl"] { /* — Layl · true dark, soft gold, for night use — */ --color-background: #0D1117; --color-surface: #161B22; --color-primary: #C9A84C; --color-accent: #E8C56A; --color-text: #E6EDF3; --color-text-secondary: #7D8590; --color-checkmark: #C9A84C; --color-primary-tint: rgba(201, 168, 76, 0.12); --color-primary-ring: rgba(201, 168, 76, 0.30); --color-accent-tint: rgba(232, 197, 106, 0.14); --color-danger: #F4566A; --color-on-primary: #161B22; --color-on-accent: #161B22; --color-separator: rgba(230, 237, 243, 0.10); --color-hairline: rgba(230, 237, 243, 0.06); color-scheme: dark; } [data-theme="ivory"] { /* — Ivory · pure monochrome, ink-on-paper — */ --color-background: #F9F8F6; --color-surface: #FFFFFF; --color-primary: #1A1A1A; --color-accent: #444444; --color-text: #1A1A1A; --color-text-secondary: #888888; --color-checkmark: #1A1A1A; --color-primary-tint: rgba(26, 26, 26, 0.06); --color-primary-ring: rgba(26, 26, 26, 0.20); --color-accent-tint: rgba(68, 68, 68, 0.10); --color-danger: #C0392B; --color-on-primary: #FFFFFF; --color-on-accent: #FFFFFF; --color-separator: rgba(26, 26, 26, 0.08); --color-hairline: rgba(26, 26, 26, 0.05); color-scheme: light; }