/* AIKYA v2 — design tokens. Single source for colour, type, space, motion. Theme: is set before first paint by the inline script in each page (reads localStorage aikya.theme; "system" resolves via prefers-color-scheme). Every colour below exists in BOTH blocks. */ :root, :root[data-theme="light"] { color-scheme: light; /* ground */ --sand: #F4F5F7; /* page */ --sand-deep: #E8EAEE; --surface: #FFFFFF; /* cards */ --surface-raised: #FFFFFF; /* sheets, menus */ --surface-sunken: #EDEFF3; /* inputs, wells, chips */ --card-edge: rgba(16,20,24,.10); --hairline: rgba(16,20,24,.10); --hairline-soft: rgba(16,20,24,.06); --hairline-strong:rgba(16,20,24,.16); --scrim: rgba(10,14,18,.48); /* roles */ --accent: #FF3D9E; /* primary action + active nav, ONLY */ --accent-hover:#E0217E; /* Pink WORDS (2026-09-25 readability audit): --accent is 3.3:1 as text on white and 2.7:1 on the page, so text and icons take this; buttons, fills, borders and the active tab keep --accent. 6.3:1 on white, 5.1:1 page. */ --accent-text:#B51F66; --accent-ink: #14282D; /* text on accent/gold fills */ --accent-wash:#FFE3F0; --gold: #F2B751; /* counters, medals, progress, badges */ --gold-text: #7A5C14; /* 5.5:1 on --gold-wash — was #8A6A1D (4.47:1), audit 2026-09-25 */ --gold-wash: #FBF0DC; /* Member avatar duotone (chosen 2026-09-23 from the "AIKYA Avatar Directions" canvas, option G). Seven deep inks that pass 4.5:1 with white text; NOT redefined for dark mode on purpose, the fill is the member's identity and stays the same everywhere, like --accent does. */ --av-g0: #0F6E56; --av-g1: #5B3FB5; --av-g2: #854F0B; --av-g3: #993556; --av-g4: #1F5FA8; --av-g5: #1F7A3E; --av-g6: #8A6A1D; --error: #B8362A; --error-wash: #FBE4E1; --info: #0069C0; --info-wash: #E0EEFB; --ok: #2E7D32; --ok-wash: #E3F3E0; --violet: #5B45B8; --violet-wash:#EBE7FA; --teal: #0F6E56; --teal-wash: #DFF5F1; --amber: #854F0B; --amber-wash: #FAEEDA; --pink: #993556; --pink-wash: #FBEAF0; --stamp: #B23A48; /* Steps Journey passport stamps (2026-09-23); 5.9:1 on white */ --paper: #FFF9F0; /* the passport page */ /* Move health metrics (2026-09-14, version C). One hue per metric, used for the icon tint, chart bars and lines. Light mode is a shade deeper than the dark-mode mockup so icons carry on white. The night sky of the sleep card is the same in both themes on purpose — it is a night. */ --hl-dist: #16946F; --hl-floor: #1F82CF; --hl-cal: #E0662F; --hl-ex: #C98A12; --hl-hr: #E0217E; --hl-hrv: #7C5CE0; --hl-spo2: #2A86D6; --hl-resp: #16946F; --hl-deep: #6152D9; --hl-rem: #2E93E0; --hl-light: #3DB58C; --hl-awake: #E3A43A; --night-1: #2A2358; --night-2: #1A1B33; --night-3: #151A26; --night-ink:#F0F6FC; --night-soft:#B9B3E0; --night-faint:#8F89B8; /* Wall of Praise sticky notes. Four paper colours, each with its own ink — the note IS the background, so ink cannot come from --ink or it fails on three of the four. Cycled by post id, not chosen by the author. */ --note-1: #FFE9A8; --note-1-ink: #5C4A0E; --note-2: #FFD3E6; --note-2-ink: #7A2B54; --note-3: #CFEFDD; --note-3-ink: #12503A; --note-4: #D3E6F8; --note-4-ink: #123A5C; --note-5: #FFD9C0; --note-5-ink: #7A3E1D; --note-6: #E4D9FF; --note-6-ink: #4A3C7A; --note-7: #C9F0EE; --note-7-ink: #0F5A56; --note-8: #E9F2B8; --note-8-ink: #4E5C12; --font-hand: "Kalam", "Comic Sans MS", cursive; --note-pin: #C23A3A; /* The cut-away corner of a note shows the page BEHIND it, so this has to track the ground painted on body (app.css) — #FAF1E6 plus the 163deg gradient — and NOT --sand, which is the cool grey the light theme stopped using as the visible page colour. The ground is a gradient, so this is its base stop: the corner is 26px, well inside the tolerance. */ --note-cut: #FAF1E6; /* Wall of Praise board. Built from --pink (#993556), the brand's AA-safe rose — NOT --accent, which at full strength fights the pink notes pinned to it. Three stops so the board has a direction and the title sits in the brightest part; the notes are all pale, so the ground must stay darker and more saturated than every one of them. */ --board-1: #A63C60; --board-2: #7A2745; --board-3: #5E1D36; /* Sign-in stage (2026-09-23, direction B): the ink ground behind the mark. Dark in BOTH themes on purpose - the sheet below carries the theme. */ --stage: #14282D; --stage-ink: #F5EDE1; --stage-soft: rgba(245,237,225,.72); /* ink */ --ink: #101418; --ink-soft: #4A5561; /* 7.6:1 on white (AAA) — was #5A6673 (5.9:1), readability audit 2026-09-25 */ --ink-faint: #56616D; /* 6.3:1 on white, 5.1:1 on the light page — was #65707D (4.1:1 on the page), audit 2026-09-25 */ --ink-muted: #A6AEB8; --muted: #54646F; --shadow-sm: 0 1px 2px rgba(16,20,24,.06); --shadow-md: 0 8px 24px rgba(16,20,24,.10); --shadow-lg: 0 -8px 40px rgba(16,20,24,.16); } :root[data-theme="dark"] { color-scheme: dark; --sand: #12161A; --sand-deep: #0C0F12; --surface: #1A2128; --surface-raised: #222B34; --surface-sunken: #101418; --card-edge: rgba(255,255,255,.09); --hairline: rgba(255,255,255,.08); --hairline-soft: rgba(255,255,255,.05); --hairline-strong:rgba(255,255,255,.16); --scrim: rgba(0,0,0,.62); --accent: #FF3D9E; --accent-hover:#FF5FB0; --accent-text:#FF6FB0; /* 6.0:1 on --surface */ --accent-ink: #14282D; --accent-wash:#401A2E; --gold: #F2B751; --gold-text: #F2B751; --gold-wash: #2B2107; --error: #FF6B5E; --error-wash: #2D1512; --info: #00B0FF; --info-wash: #08202E; --ok: #7BC67E; --ok-wash: #142B18; --violet: #A78BFA; --violet-wash:#1B1533; --teal: #5DCAA5; --teal-wash: #0D2A24; --amber: #FAC775; --amber-wash: #3F2A0A; --pink: #ED93B1; --pink-wash: #3F1A2A; --stamp: #F08A95; --paper: #231D1A; --hl-dist: #5DCAA5; --hl-floor: #3AA7F5; --hl-cal: #FF8A5B; --hl-ex: #F2B751; --hl-hr: #FF5FA8; --hl-hrv: #C79BFF; --hl-spo2: #7CC6FA; --hl-resp: #5DCAA5; --hl-deep: #7C6CF0; --hl-rem: #3AA7F5; --hl-light: #5DCAA5; --hl-awake: #F2B751; --night-1: #2A2358; --night-2: #1A1B33; --night-3: #151A26; --night-ink:#F0F6FC; --night-soft:#B9B3E0; --night-faint:#8F89B8; /* Lifted well clear of the board below. The first pass reused the app's usual dark-surface depth and the papers sat at 1.07–1.35:1 against the board — near-identical luminance, so the notes dissolved into it and the whole paper-on-a-surface idea collapsed in dark mode. These read as paper (1.9–2.6:1 separation) and still carry their ink at 6.1–7.7:1. */ --note-1: #6B5718; --note-1-ink: #FCF0C4; --note-2: #6E3253; --note-2-ink: #FDE2EE; --note-3: #215744; --note-3-ink: #D9F4E6; --note-4: #1F4C6E; --note-4-ink: #DCEBF9; --note-5: #6E3A1E; --note-5-ink: #FBE2D2; --note-6: #453564; --note-6-ink: #E9E1FB; --note-7: #1C5450; --note-7-ink: #D7F2F0; --note-8: #4A5218; --note-8-ink: #EFF5CE; --note-pin: #E05A5A; --note-cut: #12161A; /* the dark ground is flat --sand, so it matches exactly */ /* Deeper than the light ramp so the lifted papers still sit on top of it. */ --board-1: #3E1228; --board-2: #2C0B1B; --board-3: #1E0712; --stage: #0C0F12; --stage-ink: #F5EDE1; --stage-soft: rgba(245,237,225,.72); --ink: #F0F6FC; --ink-soft: #9AA4AE; /* 6.4:1 on surface — was #8B949E (5.3:1), audit 2026-09-25 */ --ink-faint: #808A95; /* 4.6:1 on surface — was #6E7681 (3.8:1) */ --ink-muted: #484F58; --muted: #9AA8B4; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 12px 32px rgba(0,0,0,.55); --shadow-lg: 0 -8px 40px rgba(0,0,0,.6); } :root { /* type */ --font-sans: "Mukta", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-script:"Pacifico", cursive; --fs-xs: 13px; --fs-sm: 14.5px; --fs-md: 15px; --fs-base: 17px; --fs-lg: 18.5px; --fs-xl: 21px; --fs-2xl: 24px; --fs-3xl: 30px; --lh: 1.45; /* space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; /* WhatsApp's own green, for the WhatsApp share button only — a brand colour, the same in light and dark (2026-09-25). */ --whatsapp: #25D366; --on-whatsapp: #FFFFFF; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --header-h: 56px; --tabbar-h: 60px; /* max() with the native reading: see AppBridgeViewController in ios/App/App/SceneDelegate.swift */ --safe-t: max(env(safe-area-inset-top, 0px), var(--native-safe-t, 0px)); --safe-b: max(env(safe-area-inset-bottom, 0px), var(--native-safe-b, 0px)); --content-max: 540px; /* phone-like column on desktop, same as v1; on phones the viewport is narrower anyway */ /* motion */ --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* the Steps Journey passport booklet (2026-09-24): paper and inks. The same in light and dark on purpose - a passport page is a physical thing, so it stays cream with dark inks whatever the theme around it. */ --pp-paper: #F1E7D0; --pp-text: #3A2E22; --pp-rule: #8A6F52; --pp-accent: #C8276F; --pp-cover: #6B1F3A; --pp-ink-0: #1F4E9C; --pp-ink-1: #A3222F; --pp-ink-2: #2E6B3A; --pp-ink-3: #5B2A86; --pp-ink-4: #8A5A12; --pp-ink-5: #0F6B72; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }