/* ============================================================ Nityaayu Design Tokens · v1.1 - Strengthened borders for 1.5:1 against adjacent surfaces - Age-variant tokens (data-age="lantern" etc.) - Scenario tokens (success/warn/info/error/critical/ai) - Bundles local fonts via fonts/fonts.css ============================================================ */ @import url("fonts/fonts.css"); :root { /* ---------- WARM NEUTRALS ---------- */ --n-ink: #1F2422; --n-ink-2: #3A413E; --n-ink-3: #5C6360; --n-ink-4: #8A918E; /* Borders: strengthened to meet ≥1.5:1 vs every surface they touch. Old #DDD9D1 vs Surface 1 (#FAF6EC) was ~1.18:1. New values verified. */ --n-line: #B8B0A0; /* Default divider — 1.65:1 on Surface 1 */ --n-line-strong:#9A917F; /* For card-on-card borders in dense layouts */ --n-line-soft: #D2CBBC; /* Hairline / inside group separator only */ --n-surface-3: #EFE9DB; /* Raised */ --n-surface-2: #F4EFE2; /* Card */ --n-surface-1: #FAF6EC; /* App background */ --n-surface-0: #FDFAF2; /* Modal */ /* ---------- BRAND PRIMARY · TULSI ---------- */ --p-50: #EAF1EE; --p-100: #CFE0D9; --p-200: #A6C6BB; --p-300: #79A89A; --p-400: #4F8978; --p-500: #2F6B5C; --p-600: #265648; --p-700: #1E4338; --p-800: #163128; --p-900: #0F211B; /* ---------- BRAND SECONDARY · HALDI ---------- */ --s-50: #FAF1E6; --s-100: #F2DEC3; --s-200: #E5C293; --s-300: #D3A363; --s-400: #B8853F; --s-500: #93682E; --s-600: #6F4E22; /* ---------- SEMANTIC ---------- */ --ok-bg: #E5EFE3; --ok-tint: #C7DCC1; --ok-base: #4E7E47; --ok-deep: #325A2D; --ok-line: #8FB389; --warn-bg: #FBEFD3; --warn-tint:#F2DC9F; --warn-base:#B07A12; --warn-deep:#7A5208; --warn-line:#D9B868; --info-bg: #E4ECF2; --info-tint:#B9CBD8; --info-base:#3F6A86; --info-deep:#2A4A60; --info-line:#88A6BC; --err-bg: #F6E2DD; --err-tint: #E5B8AC; --err-base: #B0432D; --err-deep: #7C2A1B; --err-line: #C98876; --crit-bg: #F2D0C8; --crit-base:#9C2415; --crit-deep:#65140A; --crit-line:#B45C49; --ai-bg: #ECE7F0; --ai-tint: #C9BED4; --ai-base: #6B5985; --ai-deep: #3F2F58; --ai-line: #9C8DAF; /* ---------- DISABLED ---------- */ --disabled-bg: #ECE8DE; --disabled-fg: #8E948F; --disabled-line:#B8B0A0; /* ---------- TYPOGRAPHY ---------- */ --ff-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --ff-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --t-display: 36px; --t-h1: 28px; --t-h2: 22px; --t-h3: 19px; --t-body: 17px; --t-body-sm: 15px; --t-label: 14px; --t-caption: 13px; --t-multiplier: 1; /* ---------- RADII / ELEVATION / SPACING / MOTION ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --elev-1: 0 1px 2px rgba(31,36,34,.05), 0 1px 1px rgba(31,36,34,.04); --elev-2: 0 4px 12px rgba(31,36,34,.07), 0 1px 2px rgba(31,36,34,.05); --elev-3: 0 12px 28px rgba(31,36,34,.10), 0 2px 6px rgba(31,36,34,.05); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 56px; --motion-fast: 140ms; --motion-base: 220ms; --motion-slow: 360ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ============================================================ AGE VARIANTS · set data-age="..." on or any container Override only what changes; everything else inherits the base. ============================================================ */ /* 01 SAPLING · 13–19 — slightly cooler & fresher */ [data-age="sapling"] { --n-surface-1: #F7F4EE; --n-surface-2: #EEEAE0; --p-500: #2D7B69; --p-600: #226253; --s-400: #C28A45; --info-base: #4A7693; } /* 02 DAYBREAK · 20–34 — default brand (no overrides needed) */ [data-age="daybreak"] { /* identical to :root */ } /* 03 HEARTH · 35–54 — warmer surface, slightly deeper primary */ [data-age="hearth"] { --n-surface-1: #F8F1E0; --n-surface-2: #F1E9D5; --n-surface-3: #EAE0C7; --n-line: #B0A88F; --p-500: #2A5F52; --p-600: #214B40; --s-400: #A87325; } /* 04 TIDE · 55–69 — higher contrast, deeper darks */ [data-age="tide"] { --n-ink: #14191A; --n-ink-2: #2C3431; --n-ink-3: #4A5350; --n-line: #A39A85; --n-line-strong:#857C68; --p-500: #27604F; --p-600: #1C4A3B; --ok-base: #3F6A3A; --ok-deep: #25471F; --warn-base: #A06D0F; --warn-deep: #5C3D04; --info-base: #345E78; --info-deep: #1F3A4D; --err-base: #983720; --err-deep: #631E10; } /* 05 LANTERN · 70+ — highest contrast, strongest borders, creamier surface */ [data-age="lantern"] { --n-surface-1: #FBF6E8; --n-surface-2: #F2EBD4; --n-surface-3: #E9E0BE; --n-surface-0: #FDFBF1; --n-ink: #0F1311; --n-ink-2: #232825; --n-ink-3: #3D4441; /* Borders: in Lantern, every line is at least 2.0:1 against its surface */ --n-line: #8E866F; /* 2.4:1 on Surface 1 */ --n-line-strong: #6F684F; /* 3.5:1 on Surface 1 */ --n-line-soft: #B5AC91; --p-500: #1E4338; /* primary deepens to old 700 */ --p-600: #163128; --p-700: #0F211B; --ok-base: #2A5722; --ok-deep: #16330F; --warn-base: #8A5A0A; --warn-deep:#5C3D04; --info-base: #274E66; --info-deep:#143348; --err-base: #7C2A1B; --err-deep: #4A150A; --crit-base: #7E1A0E; --crit-deep:#4A0E06; /* Lines double in weight via this variable, not stroke alone */ --line-weight: 1.5px; /* Type bumps for senior mode */ --t-multiplier: 1.05; --t-body: 18px; --t-body-sm: 16px; --t-h3: 20px; --t-h2: 24px; --t-h1: 30px; } /* ============================================================ SCENARIO TOKENS - data-scenario="medication-due" etc. on a screen-root container - Each scenario maps semantic roles to the right concrete values ============================================================ */ [data-scenario="medication-due"] { --scn-bg: var(--n-surface-1); --scn-card: var(--n-surface-0); --scn-accent: var(--p-500); --scn-accent-fg:#fff; --scn-text: var(--n-ink); --scn-meta: var(--n-ink-3); } [data-scenario="overdue"] { --scn-bg: var(--warn-bg); --scn-card: var(--warn-bg); --scn-border: var(--warn-line); --scn-text: var(--warn-deep); --scn-meta: var(--warn-deep); --scn-accent: var(--p-500); /* resolution action stays primary green */ } [data-scenario="taken"] { --scn-bg: var(--ok-bg); --scn-card: var(--ok-bg); --scn-border: var(--ok-line); --scn-text: var(--ok-deep); --scn-icon: var(--ok-base); } [data-scenario="refill"] { --scn-bg: var(--n-surface-0); --scn-card: var(--n-surface-0); --scn-strip: var(--warn-base); --scn-text: var(--n-ink); --scn-meta: var(--warn-deep); --scn-accent: var(--p-500); } [data-scenario="wellbeing"] { --scn-bg: var(--s-50); --scn-card: var(--s-50); --scn-border: var(--s-200); --scn-text: var(--s-600); --scn-meta: var(--s-600); --scn-accent: var(--p-500); } [data-scenario="reports"] { --scn-bg: var(--n-surface-1); --scn-card: var(--n-surface-2); --scn-border: var(--n-line); --scn-text: var(--n-ink); --scn-meta: var(--n-ink-3); } [data-scenario="ai-summary"] { --scn-bg: var(--ai-bg); --scn-card: var(--ai-bg); --scn-border: var(--ai-line); --scn-text: var(--ai-deep); --scn-tag-bg: var(--ai-base); --scn-tag-fg: #fff; } [data-scenario="dashboard"] { --scn-bg: var(--n-surface-1); --scn-card: var(--n-surface-0); --scn-border: var(--n-line); --scn-text: var(--n-ink); --scn-strip-ok: var(--ok-base); --scn-strip-warn: var(--warn-base); --scn-strip-info: var(--info-base); } [data-scenario="onboarding"] { --scn-bg: var(--n-surface-0); --scn-card: var(--n-surface-0); --scn-border: var(--n-line); --scn-text: var(--n-ink); --scn-accent: var(--p-500); } [data-scenario="appointment"] { --scn-bg: var(--info-bg); --scn-card: var(--info-bg); --scn-border: var(--info-line); --scn-text: var(--info-deep); --scn-meta: var(--info-base); } [data-scenario="critical"] { --scn-bg: var(--crit-bg); --scn-border: var(--crit-base); --scn-text: var(--crit-deep); --scn-accent: var(--crit-base); --scn-accent-fg:#fff; } [data-scenario="empty"] { --scn-bg: var(--n-surface-1); --scn-text: var(--n-ink); --scn-meta: var(--n-ink-3); --scn-accent: var(--ok-base); } [data-scenario="privacy"] { --scn-bg: var(--n-surface-2); --scn-card: var(--n-surface-2); --scn-border: var(--n-line); --scn-text: var(--n-ink); --scn-destruct:var(--err-base); --scn-accent: var(--p-500); }