/* ══════════════════════════════════════════════════════════════════════════ BARRE — design tokens Derived verbatim from Barre.dc.html inline styles. (spec 01 §1) Do not "tidy" the half-pixel font sizes — the irregularity is the design. ══════════════════════════════════════════════════════════════════════ */ :root { /* ── Type families ─────────────────────────────────────────────────── */ --font-display: Marcellus, 'Marcellus Fallback', Georgia, 'Times New Roman', serif; --font-ui: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── Type scale: every distinct `font:` shorthand in the prototype ──── */ /* Display (Marcellus, always weight 400) */ --font-display-hero: 400 62px/1 var(--font-display); /* quiz score */ --font-display-clock: 400 46px/1 var(--font-display); /* studio timer (ls .02em)*/ --font-display-studio: 400 34px/1.2 var(--font-display); /* studio exercise name */ --font-display-move: 400 31px/1.15 var(--font-display); /* move-detail title */ --font-display-screen: 400 30px/1.15 var(--font-display); /* screen titles */ --font-display-screen-t: 400 30px/1 var(--font-display); /* (Today greeting var.) */ --font-display-panel: 400 26px/1.15 var(--font-display); /* ME name */ --font-display-question: 400 26px/1.3 var(--font-display); /* quiz question */ --font-display-stat: 400 26px/1 var(--font-display); /* stat-tile numeral */ --font-display-focus: 400 25px/1.25 var(--font-display); /* dark focus panel h */ --font-display-result: 400 24px/1.3 var(--font-display); /* quiz verdict */ --font-display-streak: 400 22px/1 var(--font-display); /* streak numeral, ME av */ --font-display-card: 400 20px/1.25 var(--font-display); /* drill / weakest / pre-pointe */ --font-display-section: 400 19px/1 var(--font-display); /* section headings */ --font-display-sub: 400 18px/1.2 var(--font-display); /* challenge title */ --font-display-num: 400 17px/1 var(--font-display); /* grid cell, routine min*/ --font-display-avatar: 400 15px/1 var(--font-display); /* 44px avatar, ? icon */ --font-display-cue: 400 13.5px/1.5 var(--font-display); /* spoken cue quote */ /* Body / UI (DM Sans) */ --font-body-lg: 400 13.5px/1.65 var(--font-ui); /* intro paragraphs, studio detail */ --font-body: 400 13px/1.65 var(--font-ui); /* fix text, quiz why, focus quote */ --font-body-note: 400 13px/1.7 var(--font-ui); /* quiz result note */ --font-body-tight: 400 13px/1.6 var(--font-ui); /* skills blurb, empty state */ --font-body-sm: 400 12.5px/1.6 var(--font-ui); /* drill detail, weakest note */ --font-body-sm-2: 400 12.5px/1.65 var(--font-ui); /* rest-days paragraph */ --font-body-sm-3: 400 12.5px/1.55 var(--font-ui); /* challenge description */ --font-body-xs: 400 12px/1.6 var(--font-ui); /* radar caption */ --font-body-xxs: 400 11.5px/1.6 var(--font-ui); /* footnotes */ --font-label-lg: 500 14.5px/1.3 var(--font-ui); /* move row / routine name */ --font-label: 500 14px/1.4 var(--font-ui); /* mistake headline (1.4) */ --font-label-row: 500 14px/1.3 var(--font-ui); /* practice-row title */ --font-label-md: 500 13.5px/1.3 var(--font-ui); /* teaser / recent title */ --font-label-step: 500 13.5px/1.5 var(--font-ui); /* step text */ --font-label-btn: 500 13.5px/1 var(--font-ui); /* studio + primary buttons */ --font-label-btn-sm: 500 13px/1 var(--font-ui); /* "Take it again" */ --font-label-bar: 500 13.5px/1 var(--font-ui); /* skills bar category */ --font-label-pill: 500 12.5px/1 var(--font-ui); /* all pill buttons */ --font-label-chip: 500 12px/1 var(--font-ui); /* style filter chip, "Use one" */ --font-label-grid: 500 12px/1.25 var(--font-ui); /* grid row category */ --font-label-seg: 500 11.5px/1.2 var(--font-ui); /* stage segmented option */ --font-label-seg-2: 500 11.5px/1 var(--font-ui); /* skills view segmented option */ --font-label-sm: 500 11px/1 var(--font-ui); /* tick marks, dots, step numerals */ --font-label-node: 500 11px/1.2 var(--font-ui); /* radar node label */ --font-label-xs: 500 10px/1 var(--font-ui); /* status chip (uppercase, ls .08em)*/ --font-label-tab: 500 9.5px/1 var(--font-ui); /* tab label (ls .04em) */ --font-label-badge: 500 9px/1 var(--font-ui); /* Pre-pointe badge (ls .1em) */ --font-meta: 400 11.5px/1.4 var(--font-ui); /* row subtitles */ --font-meta-2: 400 11.5px/1.45 var(--font-ui); /* routine subtitle */ --font-meta-3: 400 11.5px/1.5 var(--font-ui); /* freeze line, step detail */ --font-meta-plain: 400 11.5px/1 var(--font-ui); /* skills bar count, quiz counter */ --font-meta-sm: 400 11px/1.4 var(--font-ui); /* stat-tile label, recent date */ --font-meta-xs: 400 12px/1.4 var(--font-ui); /* ME school line */ --font-kicker: 400 10.5px/1 var(--font-ui); /* screen kicker ls .2em UPPER */ --font-kicker-sm: 400 10px/1 var(--font-ui); /* pre-pointe kicker ls .16em */ --font-eyebrow: 400 11px/1 var(--font-ui); /* "Weakest link"/"Strength drill" */ --font-microlabel: 400 9.5px/1 var(--font-ui); /* "Common mistake"/"The fix" */ --font-microlabel-2: 400 9.5px/1.2 var(--font-ui); /* grid column headers ls .1em */ --font-daylabel: 400 9px/1 var(--font-ui); /* streak day letter */ --font-tiny: 400 10px/1.3 var(--font-ui); /* radar node % */ --font-glyph-lg: 400 22px/1 var(--font-ui); /* "/4" suffix */ --font-glyph: 400 18px/1 var(--font-ui); /* "→" arrow */ --font-glyph-md: 400 16px/1 var(--font-ui); /* "←" back */ --font-glyph-sm: 400 15px/1 var(--font-ui); /* play glyph in video tile */ --font-glyph-xs: 400 13px/1 var(--font-ui); /* recent icons, chevron, freeze z */ --font-glyph-xxs: 400 11px/1 var(--font-ui); /* calm-challenge day label */ /* Letter-spacing steps used with uppercase micro-type */ --ls-widest: .22em; /* studio exercise counter, intro eyebrow */ --ls-wide: .2em; /* screen kickers */ --ls-mid: .16em; /* eyebrows, micro-labels, studio chrome */ --ls-narrow: .14em; /* "day streak", video caption, mastery label, reps */ --ls-tight: .12em; /* "min", challenge counter */ --ls-tighter:.1em; /* grid headers, Pre-pointe badge, Save label */ --ls-min: .08em; /* status chip, format switch */ --ls-hair: .06em; /* intro tags */ --ls-tab: .04em; /* tab labels */ --ls-clock: .02em; /* studio clock */ /* ── Surfaces ──────────────────────────────────────────────────────── */ --surface-page: #EFE2E0; /* body behind the device */ --surface-page-gradient: radial-gradient(120% 80% at 20% 0%, #F8EDEB 0%, #EFE2E0 55%, #E7D5D3 100%); /* presentation backdrop only */ --surface-app: #FBF2F0; /* paper — the app ground */ --surface-card: #FFFFFF; --surface-sunken: #F4E6E4; /* segmented ground, bar tracks */ --surface-tint: #F7EDEB; /* drill card, quiz explainer */ --surface-tint-dashed: #FDF7F6; /* quiz teaser ground */ --surface-tint-dashed-hover: #FBF0EE; --surface-avatar: #F2E0DE; --surface-icon-button: #F3E5E3; --surface-icon-button-hover: #EDD9D7; --surface-cell-empty: #FAF3F1; /* zero-count grid cell */ --surface-inverse: #2A0F26; /* deep plum: focus panel, video, step numerals, CTA, active tab */ --surface-inverse-hover: #3E1839; --surface-studio: #170A1A; /* studio-mode overlay ground */ /* ── Brand accents ─────────────────────────────────────────────────── */ --accent-rose: #D0637F; /* primary rose (fills, strokes) */ --accent-rose-deep: #A24765; /* rose text on light. was #B4506E · 4.42 paper → 5.26. The fill --accent-rose is unchanged. */ --accent-link: #C0567A; /* links, format switch, wrong dot */ --accent-link-hover: #9C3F5E; --accent-pink: #F3C6D2; /* pink fill / text on dark */ --accent-pink-soft: #E8A9B8; /* cue rule, studio ring, wrong bd */ --accent-blush: #F7DCE3; /* blush chip ground, hover fill */ --accent-blush-border: #EFC7D1; --accent-plum-text: #8A4E68; /* deep rose-plum text on blush */ --accent-glow: rgba(208,99,127,.16); /* focus-panel corner bloom */ --accent-glow-hover: rgba(208,99,127,.18); /* dark pill hover */ --accent-radar-fill: rgba(208,99,127,.22); /* ── Status palette (move mastery) — four stages ───────────────────── */ /* The four foregrounds carry 9–12px uppercase micro-type on their own tinted grounds, so the 4.5:1 normal-text floor applies to all of them. All four measured in the 2.6–4.2 band. Same hue, a step less lightness. (spec 09 §3.2) */ --status-none-bg: #F1E7E5; --status-none-fg: #6E5866; /* was #A98A96 · 2.56 → 5.32 */ --status-none-bd: #E6D6D3; --status-none-accent: #EADCD9; --status-learning-bg: #FBE3E7; --status-learning-fg: #A24765; /* was #B4506E · 4.00 → 4.76 */ --status-learning-bd: #F3C6D2; --status-learning-accent: #F3C6D2; --status-ready-bg: #F6EAD6; --status-ready-fg: #7C5F35; /* was #8A6A3C · 4.20 → 4.98 */ --status-ready-bd: #EDDCC0; --status-ready-accent: #E0B473; --status-performed-bg: #E5EDE7; --status-performed-fg: #476E55; /* was #4F7A5F · 4.11 → 4.85 */ --status-performed-bd: #CFE0D5; --status-performed-accent: #7FA98D; /* ── Semantic feedback ─────────────────────────────────────────────── */ --success: #476E55; /* was #4F7A5F · 4.27 → 5.03 on tint */ --success-soft: #597663; /* "The fix" label — was #7FA98D · 2.64 → 4.54 on card. One of the two least legible strings in the app, on its signature feature. */ --answer-right-bg: #EDF4EF; --answer-right-bd: #A8C9B5; --answer-wrong-bg: #FBEDEF; --answer-wrong-bd: #E8A9B8; /* ── Pre-pointe / gold track ───────────────────────────────────────── */ --gold: #C79A5B; /* filled week pip */ --gold-bg: #F6EAD6; --gold-border: #EDDCC0; --gold-text: #7C5F35; /* was #8A6A3C · 4.20 → 4.98 */ --gold-heading: #4A3418; --gold-body: #6E5836; /* ── Text ────────────────────────────────────────────────────────────── THE MUTED SCALE IS TWO STEPS, NOT SIX. Do not re-expand it. (spec 09 §3.2) The original scale ran --text-muted → --text-faint → --text-kicker → --text-label → --text-hint → --text-disabled as six lightness steps. Measured on the paper ground #FBF2F0 the bottom five came out at 2.82, 2.58, 2.14, 1.89 and 1.53 against a 4.5:1 floor — and every one of them carries 9–13px type, so none is anywhere near the large-text exemption. There is not enough luminance range left between --text-muted (5.00) and the floor to keep four distinguishable steps below it: darkening each to just-passing converges them all on roughly the same colour anyway. So the scale stops encoding hierarchy in lightness. Two accessible values; size, weight and letter-spacing carry the rest, which components.css already varies hard (9px→13px, 400/500, .04em→.22em tracking). Same hues throughout — this palette was one step too pale in exactly one band, not wrong. If a future step needs "quieter", make it smaller or lighter in weight, not paler. */ --text-ink: #33202F; /* primary 13.73/15.13 */ --text-body: #5C4655; /* body copy on tinted panels */ --text-muted: #6E5866; /* secondary paragraphs. was #7A6270 · 5.00 → 5.86 paper · 6.46 card · 5.32 seg track */ /* One faint value replaces four. All were 1.89–2.85 on paper; all are 4.56 paper / 5.02 card now. They stay separate tokens on purpose: the *roles* are still distinct even though the colour no longer is. */ --text-faint: #7B6B70; /* row subtitles, inactive segmented was #A98A96 */ --text-kicker: #7B6B70; /* uppercase kickers/eyebrows was #B0919C */ --text-label: #7B6B70; /* day letters, "min", radar % was #BCA2AB */ --text-hint: #7B6B70; /* chevrons, minute counts, arrows was #C7ADB5 */ --text-disabled: #786D6F; /* zero-count grid numeral. was #D6C3C7 · 1.53 → 4.52 — the lowest ratio in the whole app */ --text-mistake: #8B6572; /* "Common mistake" label; today streak mark. was #C48EA0 · 2.72 → 4.54 on card */ --text-intro: #8D7280; /* intro column only (outside the device) */ --text-on-inverse: #FBF2F0; /* on deep plum */ --text-on-studio: #F7E9EE; /* on studio black */ --text-on-inverse-72: rgba(251,242,240,.72); --text-on-inverse-80: rgba(251,242,240,.8); --text-on-inverse-55: rgba(251,242,240,.55); /* Studio Mode is read from two metres while balancing. The four dimmed alphas were 3.39 / 2.86 and lower on #170A1A; they are opaque tints now. */ --text-on-studio-60: #9E8C99; /* was rgba(247,233,238,.6) · 3.39 → 6.09 */ --text-on-studio-50: #9E8C99; /* was rgba(247,233,238,.5) · 2.86 → 6.09 */ --text-on-studio-40: #8E7C8A; /* was rgba(247,233,238,.4) → 4.55 */ --text-on-studio-35: #8E7C8A; /* was rgba(247,233,238,.35) → 4.55 */ --text-on-studio-75: rgba(247,233,238,.75); --text-tab-inactive: #7B6B70; /* four of five tab labels. was #C0A7AF · 2.03 */ /* ── Borders ───────────────────────────────────────────────────────── */ --border-card: #EFE0DD; /* the workhorse card hairline */ --border-card-hover: #E3C6CC; --border-hairline: #F0E3E1; /* streak divider, step rail line */ --border-divider: #F4E6E4; /* rule inside the mistake accordion */ --border-dashed: #DFC6CB; /* quiz teaser, empty state (1px dashed) */ --border-control: #E0C9CE; /* unchecked tick / quiz radio */ --border-muted: #EADCD9; /* avatar, unselected status chip, empty pip */ --border-cell-empty: #F1E7E5; --border-on-inverse: rgba(251,242,240,.22); --border-on-studio: rgba(247,233,238,.2); --border-ring-track: rgba(247,233,238,.12); --border-play-ring: rgba(232,169,184,.5); --border-on-rose: rgba(255,255,255,.4); /* playful challenge day tile */ --border-intro-rule: #DCC6C4; /* presentation column only */ /* ── Radii ─────────────────────────────────────────────────────────── */ --radius-xs: 8px; /* mistake-number square */ --radius-sm: 9px; /* streak day cell, recent icon */ --radius-sm-2: 10px; /* segmented option, quiz-teaser icon */ --radius-md: 11px; /* calm-challenge day tile */ --radius-md-2: 12px; /* skills grid cell */ --radius-lg: 14px; /* segmented container, playful-challenge day tile */ --radius-card: 16px; /* standard card / list row / quiz option / stat tile */ --radius-card-lg: 18px; /* accordion, routine card, teaser, video, weakest card */ --radius-panel: 20px; /* focus panel, challenge, drill, pre-pointe */ --radius-pill: 100px; /* every pill and circle */ /* ── Spacing rhythm ────────────────────────────────────────────────── */ --gutter: 22px; /* horizontal page gutter — near-universal */ --space-1: 2px; --space-2: 4px; --space-3: 5px; --space-4: 6px; --space-5: 7px; --space-6: 8px; --space-7: 9px; /* standard list gap; card gap */ --space-8: 10px; --space-9: 11px; /* mistake-card gap */ --space-10: 12px; --space-11: 13px; --space-12: 14px; --space-13: 15px; --space-14: 16px; /* skills-bar gap; card padding */ --space-15: 17px; /* padding of white detail cards */ --space-16: 18px; /* panel padding; screen bottom padding */ --space-17: 20px; --space-18: 22px; --space-19: 26px; /* section top padding */ --space-20: 30px; --space-21: 44px; --space-22: 52px; /* screen top padding (detail/quiz) */ --space-23: 56px; /* screen top padding (tabbed screens) */ /* Section-heading rhythm: `padding: 26px 22px 10px` — 26 above, 10 below. List blocks that follow: `padding: 0 22px; gap: 9px`. Cards that stand alone: `margin: 18–22px 22px 0`. */ /* ── Elevation ─────────────────────────────────────────────────────── */ --shadow-seg: 0 1px 2px rgba(42,15,38,.10); /* the ONLY shadow inside the app */ --shadow-device: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12); /* bezel */ /* ── Motion ────────────────────────────────────────────────────────── */ --ease: ease; --dur-bar: .4s; /* challenge progress width */ --dur-bar-slow: .45s;/* skills bars, radar polygon */ --dur-quiz: .35s; /* quiz progress width */ --dur-ring: .9s; /* studio ring, linear */ --dur-rise: .35s; /* mistake card riseIn (.3s for the quiz explainer) */ --dur-pop: .4s; /* challenge counter (.5s for quiz score) */ --dur-pulse: 2.6s; /* video play ring, infinite */ /* ── Patterns ──────────────────────────────────────────────────────── */ --pattern-video: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, rgba(255,255,255,0) 12px 24px); --tabbar-bg: rgba(251,242,240,.94); --tabbar-blur: blur(12px); /* ── Safe areas (production values; spec 01 §0) ────────────────────── */ --safe-top: max(56px, env(safe-area-inset-top)); --safe-top-detail: max(52px, env(safe-area-inset-top)); --safe-bottom: env(safe-area-inset-bottom); /* ── z-index scale ─────────────────────────────────────────────────── */ --z-screen: 0; --z-tabbar: 10; --z-toast: 30; --z-overlay: 40; --z-studio: 50; --z-update: 60; }