/* === Breakpoints (used in media queries) === * --bp-xs: 360px (small phones) * --bp-sm: 480px (phones) * --bp-md: 640px (tablets) * --bp-lg: 768px (large tablets) * --bp-xl: 1024px (desktops) */ /* NARABAYBY Design System: "Soft Dawn" v2 * Font: Inter Variable (self-hosted via @fontsource-variable/inter) * Icons: Lucide (replaces all emoji) * 4 themes: light (default), dark, contrast-light, contrast-dark (WCAG AAA) * Applied via data-theme="light|dark|contrast-light|contrast-dark" 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-feed-border: #B87420; --c-sleep-border: #4668A0; --c-diaper-border: #427428; --c-growth-border: #854885; --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.05); --shadow-md: 0 4px 12px rgba(45, 41, 38, 0.07); --shadow-lg: 0 8px 24px rgba(45, 41, 38, 0.08); --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-feed-border: #D09850; --c-sleep-border: #6890B8; --c-diaper-border: #70A050; --c-growth-border: #A060A0; --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.18); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32); --outline-width: 0px; --card-border: none; --btn-border: none; --skeleton-shine: rgba(255,255,255,0.08); } } [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-feed-border: #D09850; --c-sleep-border: #6890B8; --c-diaper-border: #70A050; --c-growth-border: #A060A0; --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.18); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32); --outline-width: 0px; --card-border: none; --btn-border: none; --skeleton-shine: rgba(255,255,255,0.08); } /* ── Contrast Light (WCAG AAA 7:1+ on light bg) ──────────── */ [data-theme="contrast-light"] { --c-brand: #006060; /* 7.8:1 on #FFF */ --c-brand-light: #008080; --c-brand-dark: #004848; --c-brand-muted: rgba(0,96,96,0.10); --c-feed: #8B4000; /* 7.3:1 on #FFF */ --c-sleep: #1A3F6F; /* 9.2:1 on #FFF */ --c-diaper: #1A5E00; /* 7.6:1 on #FFF */ --c-growth: #6A1B6A; /* 8.1:1 on #FFF */ --c-wellness: #8B0000; /* 9.4:1 on #FFF */ --c-feed-muted: rgba(139,64,0,0.08); --c-sleep-muted: rgba(26,63,111,0.08); --c-diaper-muted: rgba(26,94,0,0.08); --c-feed-border: #8B4000; --c-sleep-border: #1A3F6F; --c-diaper-border: #1A5E00; --c-growth-border: #6A1B6A; --c-bg: #FFFFFF; --c-surface: #FAFAFA; --c-surface-raised: #F0F0F0; --c-card: #F0F0F0; --c-text: #000000; --c-text-2: #1A1A1A; --c-text-secondary: #1A1A1A; --c-text-tertiary: #333333; --c-success: #006400; --c-warning: #7A4500; --c-error: #8B0000; --c-info: var(--c-brand); --c-border: #000000; --c-focus: #0000CC; /* Blue focus ring: high visibility on white */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; /* Force visible borders everywhere */ --outline-width: 2px; --outline-style: solid; --card-border: 2px solid #000000; --btn-border: 2px solid currentColor; /* Typography: slightly heavier */ --weight-normal: 500; --weight-medium: 600; --weight-semibold: 700; --weight-bold: 800; --input-border: #000000; --input-focus-border: #0000CC; --toggle-bg: #666666; --skeleton-shine: rgba(0,0,0,0.06); } /* ── Contrast Dark (WCAG AAA 7:1+ on dark bg) ────────────── */ [data-theme="contrast-dark"] { --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-feed-border: #FFB040; --c-sleep-border: #80B8FF; --c-diaper-border: #70E070; --c-growth-border: #E080FF; --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 heavier */ --weight-normal: 500; --weight-medium: 600; --weight-semibold: 700; --weight-bold: 800; --input-border: #FFFFFF; --input-focus-border: #FFFF00; --toggle-bg: #888888; --skeleton-shine: rgba(255,255,255,0.06); } /* ── Typography ─────────────────────────────────────────────── */ :root { /* Font families — Apple HIG system font stack */ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; /* Type scale — Major Third (×1.25) from 1rem base */ --text-xs: 0.875rem; /* 14px — labels, captions, metadata */ --text-sm: 1rem; /* 16px — secondary text, hints */ --text-base: 1.125rem; /* 18px — body */ --text-md: 1.0625rem; /* 17px — comfortable reading */ --text-lg: 1.25rem; /* 20px — subheadings */ --text-xl: 1.375rem; /* 22px — section titles */ --text-2xl: 1.625rem; /* 26px — section titles */ --text-title: 1.75rem; /* 28px — Apple Health-style page titles */ --text-3xl: 2rem; /* 32px — hero numbers (timers) */ /* Weights — Inter Variable supports full range */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-widest: 0.1em; /* Spacing (4px base, powers of 2) */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* Aliases (legacy compat) */ --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-8: var(--space-8); /* Border radius */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --radius-full: 9999px; /* Motion */ --duration-instant: 0ms; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --duration-enter: 250ms; --duration-exit: 180ms; --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Icon sizes */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px; /* Z-index scale */ --z-base: 0; --z-above: 1; --z-sticky: 10; --z-header: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-top: 9999; /* Component sizing */ --btn-height-sm: 30px; --btn-height-md: 38px; --btn-height-lg: 46px; --tap-target: 44px; /* iOS HIG minimum */ /* Breakpoints (use in @media queries, not as var() — CSS limitation) * --bp-sm: 480px; --bp-md: 640px; --bp-lg: 768px; --bp-xl: 1024px; */ /* Responsive container */ --container-max: 600px; --container-pad: var(--space-4); /* Focus ring shorthand */ --focus-ring: 2px solid var(--c-focus); --focus-offset: 2px; /* Transition shorthands */ --transition-default: var(--duration-normal) var(--ease-default); --transition-fast: var(--duration-fast) var(--ease-default); /* Component tokens */ --input-height: 44px; --input-bg: var(--c-surface); --input-border: var(--c-border); --input-radius: var(--radius-sm); --input-text: var(--text-base); --input-focus-border: var(--c-brand); --avatar-bg: var(--c-brand-muted); --avatar-text: var(--c-brand); --toggle-bg: var(--c-border); --toggle-bg-on: var(--c-brand); --toggle-thumb: var(--c-surface); --skeleton-bg: var(--c-surface-raised); --skeleton-shine: rgba(255,255,255,0.4); --separator-color: var(--c-border); --separator-spacing: var(--space-4); /* 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-light"] button, [data-theme="contrast-dark"] button, [data-theme="contrast-light"] input, [data-theme="contrast-dark"] input, [data-theme="contrast-light"] .card, [data-theme="contrast-dark"] .card { outline: var(--outline-width) var(--outline-style) var(--c-border); outline-offset: -1px; } [data-theme="contrast-light"] input, [data-theme="contrast-dark"] input { border: 2px solid var(--c-border) !important; } /* ── High contrast: override color-mix action buttons ───────── */ [data-theme="contrast-light"] .action--feed, [data-theme="contrast-dark"] .action--feed, [data-theme="contrast-light"] .action--sleep, [data-theme="contrast-dark"] .action--sleep, [data-theme="contrast-light"] .action--diaper, [data-theme="contrast-dark"] .action--diaper { background: var(--c-surface) !important; border: 2px solid currentColor; } [data-theme="contrast-light"] .card, [data-theme="contrast-dark"] .card { border: 1px solid var(--c-border) !important; box-shadow: none !important; } [data-theme="contrast-light"] .tl-item, [data-theme="contrast-dark"] .tl-item { border: 1px solid var(--c-border) !important; box-shadow: none !important; } [data-theme="contrast-light"] .insight-row, [data-theme="contrast-dark"] .insight-row { border: 1px solid var(--c-border) !important; box-shadow: none !important; } [data-theme="contrast-light"] .btn-primary, [data-theme="contrast-dark"] .btn-primary { border: 2px solid var(--c-brand) !important; } [data-theme="contrast-light"] .sleep-active-btn, [data-theme="contrast-dark"] .sleep-active-btn { background: var(--c-surface) !important; border: 2px solid var(--c-sleep) !important; } [data-theme="contrast-light"] .modal, [data-theme="contrast-dark"] .modal { border: 2px solid var(--c-border); } /* Increase font weight globally in contrast mode */ [data-theme="contrast-light"] body, [data-theme="contrast-dark"] body { font-weight: var(--weight-medium); } /* ══════════════════════════════════════════════════════════════ DS UTILITY CLASSES ══════════════════════════════════════════════════════════════ */ /* ── Icon alignment helper ───────────────────────────────────── */ .icon-inline { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; } /* ── Typography utilities ────────────────────────────────────── */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } .text-muted { color: var(--c-text-2); } .text-tertiary { color: var(--c-text-tertiary); } .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .tracking-tight { letter-spacing: var(--tracking-tight); } /* ── Button base (DS) ────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; cursor: pointer; font-family: var(--font-sans); font-weight: var(--weight-medium); line-height: var(--leading-none); text-decoration: none; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Sizes */ .btn--sm { height: var(--btn-height-sm); padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); } .btn--md { height: var(--btn-height-md); padding: 0 var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-md); } .btn--lg { height: var(--btn-height-lg); padding: 0 var(--space-5); font-size: var(--text-base); border-radius: var(--radius-md); } /* Variants */ .btn--primary { background: var(--c-brand); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover:not(:disabled) { background: var(--c-brand-dark); box-shadow: var(--shadow-md); } .btn--secondary { background: var(--c-surface-raised); color: var(--c-text); border: 1px solid var(--c-border); } .btn--secondary:hover:not(:disabled) { background: var(--c-card); } .btn--ghost { background: transparent; color: var(--c-text-2); } .btn--ghost:hover:not(:disabled) { background: var(--c-surface-raised); color: var(--c-text); } .btn--danger { background: transparent; color: var(--c-error); border: 1px solid var(--c-error); } .btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--c-error) 10%, transparent); } .btn--icon { width: var(--btn-height-md); height: var(--btn-height-md); padding: 0; border-radius: var(--radius-full); background: transparent; color: var(--c-text-2); } .btn--icon:hover:not(:disabled) { background: var(--c-surface-raised); color: var(--c-text); } .btn--icon.btn--sm { width: var(--btn-height-sm); height: var(--btn-height-sm); } .btn--icon.btn--lg { width: var(--btn-height-lg); height: var(--btn-height-lg); } /* Contrast overrides */ [data-theme="contrast-light"] .btn--primary { border: 2px solid var(--c-brand); } [data-theme="contrast-dark"] .btn--primary { border: 2px solid var(--c-brand); } [data-theme="contrast-light"] .btn--secondary { border: 2px solid var(--c-border); } [data-theme="contrast-dark"] .btn--secondary { border: 2px solid var(--c-border); } [data-theme="contrast-light"] .btn--ghost { border: 1px solid var(--c-border); } [data-theme="contrast-dark"] .btn--ghost { border: 1px solid var(--c-border); } /* ── Card base ───────────────────────────────────────────────── */ .card { background: var(--c-surface); border-radius: var(--radius-lg); border: var(--card-border, none); box-shadow: var(--shadow-sm); overflow: hidden; animation: fade-in var(--duration-normal) var(--ease-out); will-change: transform, opacity; } .card--raised { box-shadow: var(--shadow-md); } .card--flat { box-shadow: none; background: var(--c-surface-raised); } .card--padded { padding: var(--space-4); } /* ── Badge ───────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.4; white-space: nowrap; } .badge--feed { background: var(--c-feed-muted); color: var(--c-feed); } .badge--sleep { background: var(--c-sleep-muted); color: var(--c-sleep); } .badge--diaper { background: var(--c-diaper-muted); color: var(--c-diaper); } .badge--growth { color: var(--c-growth); background: color-mix(in srgb, var(--c-growth) 12%, transparent); } .badge--wellness{ color: var(--c-wellness); background: color-mix(in srgb, var(--c-wellness) 12%, transparent); } .badge--default { background: var(--c-surface-raised); color: var(--c-text-2); } .badge--new { background: color-mix(in srgb, var(--c-brand) 15%, transparent); color: var(--c-brand-dark); } .badge--lg { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } /* ── Alert ───────────────────────────────────────────────────── */ .alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); border-left: 3px solid; } .alert--info { background: color-mix(in srgb, var(--c-info) 8%, transparent); border-color: var(--c-info); color: var(--c-text); } .alert--gentle { background: color-mix(in srgb, var(--c-warning) 8%, transparent); border-color: var(--c-warning); color: var(--c-text); } .alert--urgent { background: color-mix(in srgb, var(--c-error) 8%, transparent); border-color: var(--c-error); color: var(--c-text); } .alert--success { background: color-mix(in srgb, var(--c-success) 8%, transparent); border-color: var(--c-success); color: var(--c-text); } .alert__icon { flex-shrink: 0; margin-top: 1px; } .alert__body { flex: 1; min-width: 0; } .alert__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); } .alert__meta { font-size: var(--text-xs); color: var(--c-text-2); margin-top: var(--space-1); } /* ── Form field ──────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: var(--space-1); } .field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--c-text); } .field__hint { font-size: var(--text-xs); color: var(--c-text-2); } .field__error { font-size: var(--text-xs); color: var(--c-error); } .field input, .field select, .field textarea { width: 100%; background: var(--c-surface-raised); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--text-base); color: var(--c-text); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); outline: none; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 20%, transparent); } .field textarea { resize: vertical; min-height: 80px; line-height: var(--leading-normal); } /* ── Segmented control ───────────────────────────────────────── */ .segmented { display: flex; background: var(--c-surface-raised); border-radius: var(--radius-md); padding: 3px; gap: 2px; } .segmented__opt { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-sm); cursor: pointer; border: none; background: transparent; color: var(--c-text-2); transition: background var(--duration-fast), color var(--duration-fast); white-space: nowrap; padding: 0 var(--space-2); } .segmented__opt:hover:not(.segmented__opt--active) { color: var(--c-text); } .segmented__opt--active { background: var(--c-surface); color: var(--c-brand-dark); box-shadow: var(--shadow-sm); font-weight: var(--weight-semibold); } [data-theme="contrast-light"] .segmented__opt--active, [data-theme="contrast-dark"] .segmented__opt--active { border: 2px solid var(--c-brand); } /* ── Progress ring ───────────────────────────────────────────── */ .progress-ring { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); } .progress-ring svg { transform: rotate(-90deg); } .progress-ring__track { fill: none; stroke: var(--c-surface-raised); } .progress-ring__fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--duration-slow) var(--ease-out); } .progress-ring__label { text-align: center; } .progress-ring__value { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--c-text); display: block; } .progress-ring__desc { font-size: var(--text-xs); color: var(--c-text-2); } /* ── Toast ───────────────────────────────────────────────────── */ .toast-portal { position: fixed; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: var(--space-2); pointer-events: none; max-width: min(360px, calc(100vw - 2rem)); width: 100%; } .toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--c-text); color: var(--c-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); pointer-events: all; animation: toast-in var(--duration-enter) var(--ease-spring); will-change: transform, opacity; } .toast--out { animation: toast-out var(--duration-exit) var(--ease-in-out) forwards; } .toast--success { background: var(--c-success); } .toast--error { background: var(--c-error); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.97); } } /* ── Mood picker ─────────────────────────────────────────────── */ .mood-picker { display: flex; gap: var(--space-2); align-items: center; } .mood-opt { width: 40px; height: 40px; border-radius: var(--radius-full); border: 2px solid transparent; background: var(--c-surface-raised); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--c-text-2); transition: all var(--duration-fast); } .mood-opt:hover { transform: scale(1.1); } .mood-opt--1.active, .mood-opt--1:hover { background: color-mix(in srgb, #E05050 15%, transparent); border-color: #E05050; color: #E05050; } .mood-opt--2.active, .mood-opt--2:hover { background: color-mix(in srgb, #E08844 15%, transparent); border-color: #E08844; color: #E08844; } .mood-opt--3.active, .mood-opt--3:hover { background: color-mix(in srgb, #C0A000 15%, transparent); border-color: #C0A000; color: #C0A000; } .mood-opt--4.active, .mood-opt--4:hover { background: color-mix(in srgb, #50A878 15%, transparent); border-color: #50A878; color: #50A878; } .mood-opt--5.active, .mood-opt--5:hover { background: color-mix(in srgb, #4090D0 15%, transparent); border-color: #4090D0; color: #4090D0; } .mood-label { font-size: var(--text-xs); color: var(--c-text-2); min-width: 60px; } /* ── Quick action button ─────────────────────────────────────── */ .qa-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: none; border-radius: var(--radius-lg); cursor: pointer; text-align: center; min-height: var(--tap-target); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); font-family: var(--font-sans); position: relative; -webkit-tap-highlight-color: transparent; } .qa-btn:active { transform: scale(0.96); } .qa-btn__icon { display: flex; align-items: center; justify-content: center; } .qa-btn__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: currentColor; } .qa-btn__caption { font-size: 10px; font-weight: var(--weight-normal); opacity: 0.7; line-height: 1.2; } .qa-btn--feed { background: var(--c-feed-muted); color: var(--c-feed); box-shadow: var(--shadow-sm); } .qa-btn--sleep { background: var(--c-sleep-muted); color: var(--c-sleep); box-shadow: var(--shadow-sm); } .qa-btn--diaper { background: var(--c-diaper-muted); color: var(--c-diaper); box-shadow: var(--shadow-sm); } .qa-btn--growth { background: color-mix(in srgb, var(--c-growth) 12%, transparent); color: var(--c-growth); box-shadow: var(--shadow-sm); } .qa-btn--wellness{ background: color-mix(in srgb, var(--c-wellness) 12%, transparent); color: var(--c-wellness); box-shadow: var(--shadow-sm); } .qa-btn--neutral { background: var(--c-surface-raised); color: var(--c-text-2); border: 1px solid var(--c-border); } .qa-btn--active { box-shadow: 0 0 0 2px currentColor, var(--shadow-md); } .qa-btn--active::after { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--radius-lg) + 2px); border: 2px solid currentColor; opacity: 0.4; animation: qa-pulse 2s ease-in-out infinite; } @keyframes qa-pulse { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.1; transform: scale(1.04); } } [data-theme="contrast-light"] .qa-btn, [data-theme="contrast-dark"] .qa-btn { border: 2px solid currentColor; background: var(--c-surface) !important; } /* ══════════════════════════════════════════════════════════════ SKIP LINK (WCAG) ══════════════════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -40px; left: 0; padding: 8px 16px; background: var(--c-brand); color: var(--c-bg); z-index: 10000; transition: top var(--duration-normal); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-sm); } .skip-link:focus { top: 0; } /* ══════════════════════════════════════════════════════════════ FOCUS VISIBLE (WCAG) ══════════════════════════════════════════════════════════════ */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="radio"]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE UTILITIES ══════════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Spacing adjustments for small screens */ @media (max-width: 479px) { :root { --container-pad: var(--space-3); } } /* DS utility: margin-top using tokens */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } /* DS utility: legend dot colors */ .dot--sleep { background: var(--c-sleep); } .dot--diaper { background: var(--c-diaper); } .dot--feed { background: var(--c-feed); } /* DS utility: alert dismiss alignment */ .alert__dismiss { align-self: flex-start; margin-left: auto; } /* DS utility: required field marker */ .field__required { color: var(--c-error); margin-left: 2px; } /* DS utility: progress bar fill colors */ .progress-fill--brand { background: var(--c-brand); } .progress-fill--sleep { background: var(--c-sleep); } /* DS utility: EPDS score colors */ .epds--danger { color: #8B0000; border-color: #8B0000; } .epds--warning { color: #7A4500; border-color: #7A4500; } .epds--ok { color: #006400; border-color: #006400; } /* Ensure dark theme EPDS colors are visible */ [data-theme="dark"] .epds--danger { color: var(--c-error); border-color: var(--c-error); } [data-theme="dark"] .epds--warning { color: var(--c-warning); border-color: var(--c-warning); } [data-theme="dark"] .epds--ok { color: var(--c-success); border-color: var(--c-success); } [data-theme="contrast-light"] .epds--danger { color: var(--c-error); border-color: var(--c-error); } [data-theme="contrast-light"] .epds--warning { color: var(--c-warning); border-color: var(--c-warning); } [data-theme="contrast-light"] .epds--ok { color: var(--c-success); border-color: var(--c-success); } [data-theme="contrast-dark"] .epds--danger { color: var(--c-error); border-color: var(--c-error); } [data-theme="contrast-dark"] .epds--warning { color: var(--c-warning); border-color: var(--c-warning); } [data-theme="contrast-dark"] .epds--ok { color: var(--c-success); border-color: var(--c-success); } /* DS utility: nudge card severity */ .nudge-card--urgent { background: color-mix(in srgb, var(--c-error) 8%, transparent); border-color: var(--c-error); } .nudge-card--warning { background: color-mix(in srgb, var(--c-warning) 8%, transparent); border-color: var(--c-warning); } .nudge-card--info { background: var(--c-brand-muted); border-color: var(--c-brand); } .nudge-card--celebration { background: color-mix(in srgb, var(--c-success) 8%, transparent); border-color: var(--c-success); } /* DS utility: status dot for reactions */ .status-dot--none { background: var(--c-success); } .status-dot--mild { background: var(--c-info); } .status-dot--moderate { background: var(--c-warning); } .status-dot--severe { background: var(--c-error); } .status-dot--emergency { background: var(--c-error); } /* DS utility: reaction option border */ .reaction-option--selected { border-color: currentColor; } /* ══════════════════════════════════════════════════════════════ DYSLEXIA-FRIENDLY FONT ══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'OpenDyslexic'; src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } [data-font="dyslexic"] { --font-sans: 'OpenDyslexic', 'Comic Sans MS', 'Comic Neue', cursive, system-ui, sans-serif; } /* ══════════════════════════════════════════════════════════════ GLOBAL ANIMATIONS ══════════════════════════════════════════════════════════════ */ /* Modal slide-up */ @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } /* Fade in with subtle scale */ @keyframes fade-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* Toast slide-in from bottom */ @keyframes toast-in { from { transform: translateY(100%) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Button press */ @keyframes press { 0% { transform: scale(1); } 50% { transform: scale(0.96); } 100% { transform: scale(1); } } /* Pulse for active timers */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* === Success Animation (Peak-End Rule) === */ @keyframes success-check-draw { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } } @keyframes success-scale-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes success-fade-out { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } } /* ── Reduced motion: disable all animations ──────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }