/* ========================================================================== Satsang — design tokens (web / PWA) generated 2026-09-28 Source of truth: tools/palette.py → re-run tools/gen_web_tokens.py. Light = :root. Dark = prefers-color-scheme: dark, or . Force light with . All text/background pairs used in the UI meet WCAG AA (4.5:1+), see tokens.json. ========================================================================== */ :root { /* ---- Brand (single swappable value; also update manifest + ) ---- */ --brand-name: "Satsang"; /* ---- Colour: light ---- */ --color-background: #FAF6EF; --color-surface: #FFFCF7; --color-surface-elevated: #FFFFFF; --color-accent: #A8520F; --color-on-accent: #FFFFFF; --color-accent-soft: #F6EADB; --color-secondary-accent: #4F6B55; --color-text-primary: #2A211A; --color-text-secondary: #62554A; --color-text-tertiary: #76675A; --color-divider: #E9E0D3; --color-bubble-user: #F2E0C8; --color-bubble-user-text: #2A211A; --color-bubble-a-i: #FFFCF7; --color-destructive: #B3261E; --color-glow: #F4B860; --color-glow-rgb: 244, 184, 96; --color-accent-rgb: 168, 82, 15; --glass-bg: rgba(255, 253, 249, 0.72); --glass-stroke: rgba(255, 255, 255, 0.9); --card-stroke: var(--color-divider); --practice-bg: rgba(79, 107, 85, 0.08); --shadow-card: 0 4px 12px rgba(90, 58, 26, 0.06); --shadow-floating: 0 8px 20px rgba(90, 58, 26, 0.10), 0 1px 2px rgba(90, 58, 26, 0.06); --glow-strength: 0.22; --emblem-glow: 0.55; --grain-opacity: 0.06; --grain-blend: multiply; color-scheme: light; /* ---- Typography ---- */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, sans-serif; --font-serif: "New York", ui-serif, "Iowan Old Style", "Source Serif Pro", "Noto Serif", Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* iOS text-style scale (size / line-height / weight) */ --text-large-title: 400 34px/41px var(--font-serif); --text-title: 400 28px/34px var(--font-serif); --text-title2: 400 22px/28px var(--font-serif); --text-title3: 600 20px/25px var(--font-ui); --text-headline: 600 17px/22px var(--font-ui); --text-nav-title: 600 18px/22px var(--font-serif); --text-body: 400 17px/22px var(--font-ui); --text-answer: 400 17px/27px var(--font-serif); /* AI answers */ --text-quote: italic 400 20px/29px var(--font-serif); /* daily reflection */ --text-callout: 500 16px/21px var(--font-ui); --text-subheadline: 400 15px/21px var(--font-ui); --text-footnote: 400 13px/18px var(--font-ui); --text-caption: 600 12px/16px var(--font-ui); /* eyebrows, uppercase + tracking */ --text-caption2: 400 11px/13px var(--font-ui); /* disclaimer */ --text-tab: 600 10px/12px var(--font-ui); --tracking-tight: -0.2px; --tracking-eyebrow: 0.6px; /* ---- Spacing (4pt grid) ---- */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; --space-huge: 48px; --space-giant: 64px; --screen-margin: 16px; /* ---- Radius ---- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-bubble: 22px; --radius-card: 24px; --radius-composer: 26px; --radius-full: 999px; /* ---- Sizes ---- */ --tap-min: 44px; --nav-h: 56px; --tabbar-h: 62px; --composer-min-h: 52px; --send-size: 36px; --avatar-size: 22px; --bubble-user-max: 78%; --bubble-ai-max: 92%; --content-max: 640px; /* ---- Safe areas (needs viewport-fit=cover) ---- */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* ---- Motion ---- */ --ease-calm: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 450ms; --dur-breath: 4s; /* one inhale OR exhale */ --dur-dots: 1.2s; --message-rise: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-background: #15110E; --color-surface: #1F1A16; --color-surface-elevated: #2A231E; --color-accent: #EBA55A; --color-on-accent: #1A120A; --color-accent-soft: #2E2419; --color-secondary-accent: #9CB8A0; --color-text-primary: #F4EBE0; --color-text-secondary: #C2B3A4; --color-text-tertiary: #998B7D; --color-divider: #342C25; --color-bubble-user: #3B2A1B; --color-bubble-user-text: #F4EBE0; --color-bubble-a-i: #1F1A16; --color-destructive: #F28B82; --color-glow: #D9822B; --color-glow-rgb: 217, 130, 43; --color-accent-rgb: 235, 165, 90; --glass-bg: rgba(42, 35, 30, 0.78); --glass-stroke: rgba(255, 240, 220, 0.10); --card-stroke: rgba(255, 240, 220, 0.07); --practice-bg: rgba(156, 184, 160, 0.08); --shadow-card: 0 0 0 0 transparent; --shadow-floating: 0 10px 24px rgba(0, 0, 0, 0.45); --glow-strength: 0.16; --emblem-glow: 0.38; --grain-opacity: 0.06; --grain-blend: screen; color-scheme: dark; } } :root[data-theme="dark"] { --color-background: #15110E; --color-surface: #1F1A16; --color-surface-elevated: #2A231E; --color-accent: #EBA55A; --color-on-accent: #1A120A; --color-accent-soft: #2E2419; --color-secondary-accent: #9CB8A0; --color-text-primary: #F4EBE0; --color-text-secondary: #C2B3A4; --color-text-tertiary: #998B7D; --color-divider: #342C25; --color-bubble-user: #3B2A1B; --color-bubble-user-text: #F4EBE0; --color-bubble-a-i: #1F1A16; --color-destructive: #F28B82; --color-glow: #D9822B; --color-glow-rgb: 217, 130, 43; --color-accent-rgb: 235, 165, 90; --glass-bg: rgba(42, 35, 30, 0.78); --glass-stroke: rgba(255, 240, 220, 0.10); --card-stroke: rgba(255, 240, 220, 0.07); --practice-bg: rgba(156, 184, 160, 0.08); --shadow-card: 0 0 0 0 transparent; --shadow-floating: 0 10px 24px rgba(0, 0, 0, 0.45); --glow-strength: 0.16; --emblem-glow: 0.38; --grain-opacity: 0.06; --grain-blend: screen; color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 120ms; --dur-slow: 120ms; --message-rise: 0px; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }