/* NARABAYBY Design System: "Soft Dawn" * 3 themes: light (default), dark, contrast (WCAG AAA) * Applied via data-theme="light|dark|contrast" on * System preference is the fallback when no data-theme is set. */ /* ── Light (default) ───────────────────────────────────────── */ :root, [data-theme="light"] { --c-brand: #7BA7A7; --c-brand-light: #A3C4C4; --c-brand-dark: #5A8585; --c-brand-muted: rgba(123,167,167,0.12); --c-feed: #D4903A; --c-sleep: #5D82B8; --c-diaper: #5A8F3C; --c-growth: #A060A0; --c-wellness: #B85050; --c-feed-muted: rgba(212,144,58,0.12); --c-sleep-muted: rgba(93,130,184,0.12); --c-diaper-muted: rgba(90,143,60,0.12); --c-bg: #FDFBF7; --c-surface: #FFFFFF; --c-surface-raised: #F7F5F0; --c-card: #F7F5F0; --c-text: #2D2926; --c-text-2: #5A5550; --c-text-secondary: #5A5550; --c-text-tertiary: #8A8580; --c-success: #3A7A48; --c-warning: #B87A20; --c-error: #A03030; --c-info: var(--c-brand); --c-border: rgba(45, 41, 38, 0.12); --c-focus: #7BA7A7; --shadow-sm: 0 1px 3px rgba(45, 41, 38, 0.08); --shadow-md: 0 4px 12px rgba(45, 41, 38, 0.10); --shadow-lg: 0 8px 24px rgba(45, 41, 38, 0.12); --outline-width: 0px; --outline-style: none; --card-border: none; --btn-border: none; } /* ── Dark ───────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --c-brand: #8FBCBC; --c-brand-light: #6A9A9A; --c-brand-dark: #A8D0D0; --c-brand-muted: rgba(143,188,188,0.15); --c-feed: #E8B87A; --c-sleep: #8DADD0; --c-diaper: #90C070; --c-growth: #C080C0; --c-wellness: #D08080; --c-feed-muted: rgba(232,184,122,0.15); --c-sleep-muted: rgba(141,173,208,0.15); --c-diaper-muted: rgba(144,192,112,0.15); --c-bg: #1A1918; --c-surface: #242220; --c-surface-raised: #2E2C2A; --c-card: #2E2C2A; --c-text: #F5F0EB; --c-text-2: #B0AAA4; --c-text-secondary: #B0AAA4; --c-text-tertiary: #7A756F; --c-border: rgba(255, 255, 255, 0.10); --c-focus: #8FBCBC; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --outline-width: 0px; --card-border: none; --btn-border: none; } } [data-theme="dark"] { --c-brand: #8FBCBC; --c-brand-light: #6A9A9A; --c-brand-dark: #A8D0D0; --c-brand-muted: rgba(143,188,188,0.15); --c-feed: #E8B87A; --c-sleep: #8DADD0; --c-diaper: #90C070; --c-growth: #C080C0; --c-wellness: #D08080; --c-feed-muted: rgba(232,184,122,0.15); --c-sleep-muted: rgba(141,173,208,0.15); --c-diaper-muted: rgba(144,192,112,0.15); --c-bg: #1A1918; --c-surface: #242220; --c-surface-raised: #2E2C2A; --c-card: #2E2C2A; --c-text: #F5F0EB; --c-text-2: #B0AAA4; --c-text-secondary: #B0AAA4; --c-text-tertiary: #7A756F; --c-border: rgba(255, 255, 255, 0.10); --c-focus: #8FBCBC; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --outline-width: 0px; --card-border: none; --btn-border: none; } /* ── High Contrast (WCAG AAA ≥ 7:1) ───────────────────────── */ [data-theme="contrast"] { /* All text/bg combos verified ≥ 7:1 */ --c-brand: #00D0D0; /* 8.2:1 on #000 */ --c-brand-light: #40E0E0; --c-brand-dark: #00A0A0; --c-brand-muted: rgba(0,208,208,0.15); --c-feed: #FFB040; /* 9.1:1 on #000 */ --c-sleep: #80B8FF; /* 8.6:1 on #000 */ --c-diaper: #70E070; /* 10.2:1 on #000 */ --c-growth: #E080FF; /* 7.4:1 on #000 */ --c-wellness: #FF8080; /* 7.2:1 on #000 */ --c-feed-muted: rgba(255,176,64,0.15); --c-sleep-muted: rgba(128,184,255,0.15); --c-diaper-muted: rgba(112,224,112,0.15); --c-bg: #000000; --c-surface: #0D0D0D; --c-surface-raised: #1A1A1A; --c-card: #1A1A1A; --c-text: #FFFFFF; --c-text-2: #E0E0E0; --c-text-secondary: #E0E0E0; --c-text-tertiary: #C0C0C0; --c-success: #40FF80; --c-warning: #FFD040; --c-error: #FF6060; --c-info: var(--c-brand); --c-border: #FFFFFF; --c-focus: #FFFF00; /* Yellow focus ring: maximum visibility */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; /* Force visible borders everywhere */ --outline-width: 2px; --outline-style: solid; --card-border: 1px solid #FFFFFF; --btn-border: 2px solid currentColor; /* Typography: slightly larger and heavier */ --weight-normal: 500; --weight-medium: 600; --weight-semibold: 700; --weight-bold: 800; } /* ── Typography ─────────────────────────────────────────────── */ :root { --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Short aliases for new components */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; /* Motion */ --duration-fast: 150ms; --duration-normal: 250ms; --easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); /* Defaults for non-contrast themes */ --c-border: rgba(45, 41, 38, 0.12); --c-focus: #7BA7A7; --outline-width: 0px; --card-border: none; --btn-border: none; } /* ── Base reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--c-text); background-color: var(--c-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 200ms, color 200ms; } /* ── Focus ring (accessible for all themes) ─────────────────── */ :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; } /* ── High contrast: force borders on interactive elements ──── */ [data-theme="contrast"] button, [data-theme="contrast"] input, [data-theme="contrast"] .card { outline: var(--outline-width) var(--outline-style) var(--c-border); outline-offset: -1px; } [data-theme="contrast"] input { border: 2px solid var(--c-border) !important; } /* ── High contrast: override color-mix action buttons ───────── */ [data-theme="contrast"] .action--feed, [data-theme="contrast"] .action--sleep, [data-theme="contrast"] .action--diaper { background: var(--c-surface) !important; border: 2px solid currentColor; } [data-theme="contrast"] .card { border: 1px solid var(--c-border) !important; box-shadow: none !important; } [data-theme="contrast"] .tl-item { border: 1px solid var(--c-border) !important; box-shadow: none !important; } [data-theme="contrast"] .insight-row { border: 1px solid var(--c-border) !important; box-shadow: none !important; } [data-theme="contrast"] .btn-primary { border: 2px solid var(--c-brand) !important; } [data-theme="contrast"] .sleep-active-btn { background: var(--c-surface) !important; border: 2px solid var(--c-sleep) !important; } [data-theme="contrast"] .modal { border: 2px solid var(--c-border); } /* Increase font weight globally in contrast mode */ [data-theme="contrast"] body { font-weight: var(--weight-medium); }