/* Snusee — design tokens. The single source of truth for colour, shape, * elevation, spacing and motion. Extracted from REFERENCE IMAGE.png. * * No component stylesheet may hardcode a colour, radius or duration. If a * value is needed and not here, it gets added here first. */ :root { /* ---- Surfaces ---------------------------------------------------- */ --cream: #FDF4E9; --cream-deep: #F7E8D8; --card: #FFFCF7; --card-sunk: #FBF2E8; --white: #FFFFFF; /* ---- Brand ------------------------------------------------------- */ --pink: #F7A8BC; --pink-deep: #EE8AA6; --pink-wash: #FDEBF0; /* ---- Accents: one per timer tile, reused across badges/milestones -- */ --lavender: #C9B8E8; --mint: #A8DBC5; --peach: #FFD1A9; --sky: #B8D9F0; --lavender-wash: #F0EAFA; --mint-wash: #E6F4EE; --peach-wash: #FFF0E0; --sky-wash: #EAF3FB; /* Darker ink per accent, for digits on a tinted tile. */ --lavender-ink: #8B78B8; --mint-ink: #6FAF92; --peach-ink: #D9924F; /* ---- Text: warm brown-grey. Never pure black. --------------------- */ --ink: #6B5A5E; --ink-soft: #A89296; --ink-faint: #C9BAB8; --on-pink: #FFFFFF; /* ---- State ------------------------------------------------------- */ /* There is no red token. Not an oversight -- see the scale below. */ --locked: #D9D2CE; --locked-bg: #F2EDE9; --gold: #F0C674; /* ---- Craving intensity: green -> yellow -> peach -> pink ---------- */ /* Never reaches red. "Veľmi silná" is pink. A person logging their * worst moment must not be shown an error colour for telling the truth. */ --scale-1: #A8D8A0; --scale-2: #CBE0A0; --scale-3: #F5D76E; --scale-4: #F5A96B; --scale-5: #F08C9E; /* ---- Sea (V2: the voyage) ---------------------------------------- */ /* Sits inside the existing palette rather than beside it: the sea is the * sky token pushed a little deeper, so the map still reads as the same * app and not as a game bolted onto it. */ --sea: #B6DCF3; --sea-deep: #8CC3E4; --sea-far: #DCEEFA; --sea-foam: #FFFFFF; --sea-route: #FFFFFF; --wake: #FFF0D2; /* V3: the sea had one flat vertical gradient stretched over a 4000px map, * which at that height is a single unchanging blue -- the screenshot that * started this looked like coloured paper, not water. Water needs three * things and no more: depth that repeats, crests that catch light, and * sunlight moving across it. * * --sea-band is the depth, repeated every --sea-band-h rather than stretched, * so the eye gets a horizon rhythm however far you scroll. --sea-swell is the * crest and trough pair. --sea-glint is sparse foam. The last two ride a * transform-animated layer, so the drift is GPU work and not a repaint of a * four-thousand-pixel background. */ --sea-crest: rgba(255, 255, 255, .22); --sea-trough: rgba(108, 168, 205, .10); /* The band MUST start and end on the same colour. It repeats, so any * difference between 0% and 100% is a hard horizontal seam every 340px -- * which is what the first attempt looked like, a stack of blue strips. */ --sea-band-h: 340px; --sea-band: linear-gradient(180deg, var(--sea) 0%, var(--sea-far) 16%, var(--sea) 52%, var(--sea-deep) 84%, var(--sea) 100%); /* Two crest lines of unequal spacing per cycle, not one evenly repeated: * an even repeat reads as corduroy, and real swell does not have a period * you can count. */ --sea-swell: repeating-linear-gradient(176.5deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 15px, var(--sea-crest) 15px, var(--sea-crest) 16.5px, rgba(255, 255, 255, 0) 16.5px, rgba(255, 255, 255, 0) 29px, var(--sea-trough) 29px, var(--sea-trough) 31px, rgba(255, 255, 255, 0) 31px, rgba(255, 255, 255, 0) 44px, var(--sea-crest) 44px, var(--sea-crest) 45px, rgba(255, 255, 255, 0) 45px, rgba(255, 255, 255, 0) 67px); --sea-glint: radial-gradient(circle at 22% 26%, rgba(255, 255, 255, .55) 0 1.6px, rgba(255, 255, 255, 0) 2.6px); --sea-sun: radial-gradient(130% 62% at 74% -8%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 62%); /* ---- Charts (V2: statistics) ------------------------------------- */ /* Chosen by running the palette validator against the card surface * (#FFFCF7), not by eye. The display pastels are too light and too low in * chroma to encode data -- --mint at L .85 reads as grey next to a bar -- * so these are deeper steps of the SAME hues, used ONLY inside charts. * * --chart-bar is the single-series colour. Hours, weekdays, triggers and * attempts are all one series each, so every bar in a chart is the same * colour and identity comes from its label. Colouring bars by rank would * repaint them whenever the ranking changed. * * --chart-good / --chart-bad are the only categorical pair in the app * (odolal vs zlyhanie). Validated: CVD ΔE 8.3, normal-vision ΔE 19.4. Both * are under 3:1 against the card, so every use ships a visible text label * and a number -- never colour alone. * * Still no red: --chart-bad is the peach hue the craving scale already ends * on, one step deeper. */ --chart-bar: #E2718F; --chart-good: #45A886; --chart-bad: #D98A42; --chart-grid: #EFE4DA; /* ---- Symptom timeline (V3: the health section) -------------------- */ /* Reuses the craving scale's hues one step deeper, for the same reason the * chart tokens exist: the display pastels do not survive being a 6px bar. * The scale still stops before red -- a symptom at its worst is a thing the * body is doing on schedule, not an error. */ --sym-ahead: #C9BAB8; /* not started yet -- the same faint as --ink-faint */ --sym-rise: #F5C77A; --sym-peak: #F0949E; --sym-fall: #A9CFA2; --sym-done: #8FC4A8; /* ---- Gradients --------------------------------------------------- */ --grad-primary: linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%); --grad-page: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); --grad-progress: linear-gradient(90deg, var(--pink) 0%, var(--peach) 100%); --grad-sea: linear-gradient(180deg, var(--sea-far) 0%, var(--sea) 28%, var(--sea-deep) 100%); /* V3. Every card used a single flat fill, which is why the whole app read * as paper cut-outs: with no lighting at all a rounded rectangle has no * volume, and adding a bigger drop shadow only makes it a flatter card that * floats higher. The gradient is the light falling ACROSS the card; the * inset highlight in --shadow-edge is the lit top rim. */ /* The page, with light on it. A flat cream wash gives a cream card nothing * to be lighter than; these three blooms are what the cards sit on. Shared * by .motif and the SOS takeover, which covers the motif entirely and would * otherwise be the one flat screen in the app. */ --grad-page-lit: radial-gradient(52% 34% at 12% 4%, var(--pink-wash), transparent 70%), radial-gradient(46% 30% at 92% 32%, var(--lavender-wash), transparent 72%), radial-gradient(60% 36% at 50% 104%, var(--peach-wash), transparent 74%), var(--grad-page); --grad-card: linear-gradient(168deg, var(--white) 0%, var(--card) 44%, var(--card-sunk) 100%); --grad-hero: linear-gradient(150deg, var(--pink-wash) 0%, var(--card) 52%, var(--lavender-wash) 100%); --grad-sunk: linear-gradient(180deg, var(--card-sunk) 0%, var(--card) 100%); /* ---- Shape ------------------------------------------------------- */ --radius-card: 28px; --radius-tile: 20px; --radius-input: 16px; --radius-chip: 999px; --radius-btn: 999px; /* ---- Elevation: pink-tinted, never grey --------------------------- */ --shadow-soft: 0 8px 24px rgba(214, 164, 178, .18); --shadow-lift: 0 4px 12px rgba(214, 164, 178, .12); --shadow-btn: 0 6px 16px rgba(238, 138, 166, .32); --shadow-press: 0 2px 6px rgba(214, 164, 178, .20); --shadow-inset: inset 0 2px 5px rgba(190, 150, 160, .10); /* V3 inner light. --shadow-edge is the pair every raised surface wears: a * lit top rim and a hairline ring, both inset. The ring replaces the border * a card would otherwise need -- a real border shifts layout by a pixel and * has to be subtracted from the padding, an inset ring does neither. * * --shadow-well is the opposite: a surface the eye should read as CUT INTO * the card rather than sitting on it -- progress tracks, inputs, the symptom * timelines. Anything holding a value gets the well, anything holding * content gets the edge. */ --shadow-edge: inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 0 0 1px rgba(214, 164, 178, .13); --shadow-well: inset 0 2px 6px rgba(178, 138, 150, .18), inset 0 -1px 0 rgba(255, 255, 255, .70); --shadow-deep: 0 14px 34px rgba(200, 148, 164, .20), 0 2px 6px rgba(200, 148, 164, .10); /* Sea labels float over water, not over a card, so they carry a cooler * shadow -- a pink one over blue reads as a colour mistake. */ --shadow-label: 0 4px 12px rgba(84, 132, 166, .26), inset 0 1px 0 rgba(255, 255, 255, .95); /* ---- Spacing: 4px base ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --screen-pad: 20px; --card-pad: 20px; --card-gap: 16px; --tabbar-h: 64px; --sos-size: 60px; /* ---- Type -------------------------------------------------------- */ --font-display: 'Baloo 2', system-ui, -apple-system, sans-serif; --font-body: 'Nunito', system-ui, -apple-system, sans-serif; /* ---- Motion ------------------------------------------------------ */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* ---- Layers ------------------------------------------------------ */ --z-motif: 0; --z-content: 1; --z-tabbar: 40; --z-sos: 45; --z-sheet: 60; --z-takeover: 80; } /* Motion is decoration everywhere except the SOS breathing guide, which * keeps a working non-animated fallback (its phase label and countdown still * update). Nothing here is load-bearing. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }