/* ============================================================ TRAIN & SHINE — Design Tokens A configurable, platform-adaptive theme layer. Resolution order (cascade of data-attributes on / frame): data-aesthetic = clean | bold | calm -> tone, radius, density, shadow data-font = system | grotesk | rounded data-accent = green | blue | violet | orange | ink data-platform = ios | android (set per frame) data-theme = light | dark (set per frame or root) In real RN these map to: NativeWind theme config + Platform.select. ============================================================ */ :root { /* ---- Spacing (4pt grid) ---- */ --sp-0: 0px; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-11: 56px; --sp-12: 64px; /* ---- Accent palette (vivid; chosen via data-accent) ---- */ --accent: #1faa4d; /* green default */ --accent-press: #178f40; --accent-soft: #1faa4d1f; --on-accent: #ffffff; /* ---- Status colors ---- */ --success: #1faa4d; --warning: #e88a00; --danger: #e5484d; --info: #2f7ff0; /* ---- Motion tokens ---- */ --dur-1: 120ms; /* micro: ripple, press */ --dur-2: 220ms; /* standard: toggles, fades */ --dur-3: 320ms; /* emphasized: sheets, dialogs */ --dur-4: 460ms; /* large transitions */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Material standard */ --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1); /* Material decelerate */ --ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15); /* Material accelerate */ --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); /* iOS spring-ish */ --ease-spring: linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.013 55%,1.011 63.9%,1.001 85%,1); /* ---- Z layers ---- */ --z-nav: 50; --z-sheet: 100; --z-dialog: 200; --z-toast: 300; --z-menu: 250; /* ---- Neutrals: tone hue/chroma (overridden by aesthetic) ---- */ --tone-h: 255; --tone-c: 0.006; /* ---- Radius scale (overridden by aesthetic) ---- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-full: 999px; /* ---- Elevation strength multiplier ---- */ --shadow-a: 0.10; /* ---- Type families ---- */ --font-ios: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --font-android: "Roboto", "Roboto Flex", system-ui, sans-serif; --font-ui: var(--font-ios); /* resolved by platform below */ --font-display: var(--font-ui); /* headline face; editorial overrides to serif */ --font-num: var(--font-ui); /* tabular stat face */ --font-body: var(--font-ui); /* reading/body face; grotesk overrides to serif */ } /* ============================================================ AESTHETIC PRESETS ============================================================ */ :root[data-aesthetic="clean"] { --tone-h: 264; --tone-c: 0.005; --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --shadow-a: 0.10; --density: 1; } :root[data-aesthetic="bold"] { --tone-h: 264; --tone-c: 0.008; --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 34px; --shadow-a: 0.16; --density: 1.06; } :root[data-aesthetic="calm"] { --tone-h: 264; --tone-c: 0.006; --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --r-2xl: 38px; --shadow-a: 0.06; --density: 1.12; } /* ============================================================ ACCENT VARIANTS (shared lightness/chroma, varied hue) ============================================================ */ :root[data-accent="green"] { --accent:#1f9d6b; --accent-press:#17855a; --accent-soft:#1f9d6b1f; --on-accent:#fff; } :root[data-accent="blue"] { --accent:#3478f0; --accent-press:#2563d6; --accent-soft:#3478f01f; --on-accent:#fff; } :root[data-accent="violet"] { --accent:#7257f5; --accent-press:#5e44df; --accent-soft:#7257f51f; --on-accent:#fff; } :root[data-accent="orange"] { --accent:#ec5a26; --accent-press:#d4491a; --accent-soft:#ec5a261f; --on-accent:#fff; } :root[data-accent="ink"] { --accent:#e9e9ee; --accent-press:#cfcfd6; --accent-soft:#e9e9ee14; --on-accent:#16161b; } /* dark-mode accent tends to read brighter */ [data-theme="dark"] { --accent-soft: color-mix(in oklch, var(--accent) 22%, transparent); } /* ============================================================ FONT OPTIONS ============================================================ */ :root[data-font="grotesk"] { /* geometric-sans display + editorial serif body (poster-type pairing) */ --font-ios: "Montserrat", system-ui, sans-serif; --font-android: "Montserrat", system-ui, sans-serif; --font-display: "Montserrat", system-ui, sans-serif; --font-num: "Montserrat", system-ui, sans-serif; --font-body: "Lora", Georgia, serif; } :root[data-font="editorial"] { /* editorial (Substack-leaning): serif display, clean grotesk body */ --font-ios: "Hanken Grotesk", system-ui, sans-serif; --font-android: "Hanken Grotesk", system-ui, sans-serif; --font-display: "Newsreader", Georgia, serif; --font-num: "Hanken Grotesk", system-ui, sans-serif; } /* ============================================================ COLOR MODES (neutrals derived from tone hue/chroma via oklch) Applied on any element carrying data-theme (frame or root). ============================================================ */ [data-theme="light"] { --bg: oklch(0.985 var(--tone-c) var(--tone-h)); --bg-grouped: oklch(0.955 calc(var(--tone-c) * 1.4) var(--tone-h)); --surface: oklch(1 0 0); --surface-2: oklch(0.975 var(--tone-c) var(--tone-h)); --surface-sunken: oklch(0.94 calc(var(--tone-c)*1.4) var(--tone-h)); --fill: oklch(0.62 var(--tone-c) var(--tone-h) / 0.10); --fill-2: oklch(0.62 var(--tone-c) var(--tone-h) / 0.06); --border: oklch(0.6 var(--tone-c) var(--tone-h) / 0.16); --separator: oklch(0.6 var(--tone-c) var(--tone-h) / 0.12); --text: oklch(0.18 calc(var(--tone-c)*1.5) var(--tone-h)); --text-2: oklch(0.46 calc(var(--tone-c)*1.5) var(--tone-h)); --text-3: oklch(0.62 var(--tone-c) var(--tone-h)); --text-disabled: oklch(0.74 var(--tone-c) var(--tone-h)); --scrim: oklch(0.2 0 0 / 0.32); color-scheme: light; } [data-theme="dark"] { --bg: oklch(0.155 calc(var(--tone-c)*1.3) var(--tone-h)); --bg-grouped: oklch(0.125 calc(var(--tone-c)*1.3) var(--tone-h)); --surface: oklch(0.195 calc(var(--tone-c)*1.2) var(--tone-h)); --surface-2: oklch(0.232 calc(var(--tone-c)*1.1) var(--tone-h)); --surface-sunken: oklch(0.10 calc(var(--tone-c)*1.4) var(--tone-h)); --fill: oklch(0.8 var(--tone-c) var(--tone-h) / 0.13); --fill-2: oklch(0.8 var(--tone-c) var(--tone-h) / 0.07); --border: oklch(0.9 var(--tone-c) var(--tone-h) / 0.14); --separator: oklch(0.9 var(--tone-c) var(--tone-h) / 0.09); --text: oklch(0.98 var(--tone-c) var(--tone-h)); --text-2: oklch(0.72 var(--tone-c) var(--tone-h)); --text-3: oklch(0.55 var(--tone-c) var(--tone-h)); --text-disabled: oklch(0.40 var(--tone-c) var(--tone-h)); --scrim: oklch(0 0 0 / 0.58); color-scheme: dark; } /* iOS uses a distinct grouped-table background; Android leans flatter */ [data-platform="ios"] { --font-ui: var(--font-ios); } [data-platform="android"] { --font-ui: var(--font-android); --bg-grouped: var(--bg); } /* ============================================================ ELEVATION (platform-flavored shadows) ============================================================ */ [data-platform="ios"] { --elev-1: 0 1px 2px oklch(0 0 0 / calc(var(--shadow-a) * 0.7)); --elev-2: 0 6px 18px oklch(0 0 0 / var(--shadow-a)), 0 1px 3px oklch(0 0 0 / calc(var(--shadow-a)*0.6)); --elev-3: 0 18px 48px oklch(0 0 0 / calc(var(--shadow-a)*1.5)), 0 4px 12px oklch(0 0 0 / var(--shadow-a)); } [data-platform="android"] { --elev-1: 0 1px 2px oklch(0 0 0 / calc(var(--shadow-a)*1.2)), 0 1px 3px oklch(0 0 0 / calc(var(--shadow-a)*0.6)); --elev-2: 0 2px 6px oklch(0 0 0 / calc(var(--shadow-a)*1.4)), 0 1px 2px oklch(0 0 0 / var(--shadow-a)); --elev-3: 0 8px 24px oklch(0 0 0 / calc(var(--shadow-a)*1.8)), 0 4px 8px oklch(0 0 0 / var(--shadow-a)); } /* ============================================================ TYPE ROLES — resolved per platform. iOS roles follow Apple HIG; Android roles follow Material 3. Each role sets size / line-height / weight / tracking. ============================================================ */ [data-platform="ios"] { --t-display-s: 34px; --t-display-w: 700; --t-display-lh: 41px; --t-display-ls: 0.37px; --t-title-s: 28px; --t-title-w: 700; --t-title-lh: 34px; --t-title-ls: 0.36px; --t-heading-s: 22px; --t-heading-w: 700; --t-heading-lh: 28px; --t-heading-ls: -0.26px; --t-subtitle-s:20px; --t-subtitle-w:600; --t-subtitle-lh:25px; --t-subtitle-ls:-0.45px; --t-headline-s:17px; --t-headline-w:600; --t-headline-lh:22px; --t-headline-ls:-0.43px; --t-body-s: 17px; --t-body-w: 400; --t-body-lh: 22px; --t-body-ls: -0.43px; --t-callout-s: 16px; --t-callout-w: 400; --t-callout-lh: 21px; --t-callout-ls: -0.31px; --t-subhead-s: 15px; --t-subhead-w: 400; --t-subhead-lh: 20px; --t-subhead-ls: -0.23px; --t-footnote-s:13px; --t-footnote-w: 400; --t-footnote-lh:18px; --t-footnote-ls: -0.08px; --t-caption-s: 12px; --t-caption-w: 400; --t-caption-lh: 16px; --t-caption-ls: 0px; --t-label-s: 11px; --t-label-w: 500; --t-label-lh: 13px; --t-label-ls: 0.06px; } [data-platform="android"] { --t-display-s: 32px; --t-display-w: 700; --t-display-lh: 40px; --t-display-ls: 0px; --t-title-s: 28px; --t-title-w: 600; --t-title-lh: 36px; --t-title-ls: 0px; --t-heading-s: 22px; --t-heading-w: 500; --t-heading-lh: 28px; --t-heading-ls: 0px; --t-subtitle-s:18px; --t-subtitle-w:500; --t-subtitle-lh:24px; --t-subtitle-ls:0.15px; --t-headline-s:16px; --t-headline-w:600; --t-headline-lh:24px; --t-headline-ls:0.15px; --t-body-s: 16px; --t-body-w: 400; --t-body-lh: 24px; --t-body-ls: 0.5px; --t-callout-s: 15px; --t-callout-w: 400; --t-callout-lh: 22px; --t-callout-ls: 0.25px; --t-subhead-s: 14px; --t-subhead-w: 500; --t-subhead-lh: 20px; --t-subhead-ls: 0.1px; --t-footnote-s:13px; --t-footnote-w: 400; --t-footnote-lh:18px; --t-footnote-ls: 0.25px; --t-caption-s: 12px; --t-caption-w: 400; --t-caption-lh: 16px; --t-caption-ls: 0.4px; --t-label-s: 11px; --t-label-w: 500; --t-label-lh: 16px; --t-label-ls: 0.5px; } /* Type utility classes */ .t-display { font:var(--t-display-w) var(--t-display-s)/var(--t-display-lh) var(--font-display); letter-spacing:var(--t-display-ls); } .t-title { font:var(--t-title-w) var(--t-title-s)/var(--t-title-lh) var(--font-display); letter-spacing:var(--t-title-ls); } .t-heading { font:var(--t-heading-w) var(--t-heading-s)/var(--t-heading-lh) var(--font-display); letter-spacing:var(--t-heading-ls); } .t-subtitle { font:var(--t-subtitle-w) var(--t-subtitle-s)/var(--t-subtitle-lh) var(--font-ui); letter-spacing:var(--t-subtitle-ls); } .t-headline { font:var(--t-headline-w) var(--t-headline-s)/var(--t-headline-lh) var(--font-ui); letter-spacing:var(--t-headline-ls); } .t-body { font:var(--t-body-w) var(--t-body-s)/var(--t-body-lh) var(--font-body); letter-spacing:var(--t-body-ls); } .t-callout { font:var(--t-callout-w) var(--t-callout-s)/var(--t-callout-lh) var(--font-body); letter-spacing:var(--t-callout-ls); } .t-subhead { font:var(--t-subhead-w) var(--t-subhead-s)/var(--t-subhead-lh) var(--font-ui); letter-spacing:var(--t-subhead-ls); } .t-footnote { font:var(--t-footnote-w) var(--t-footnote-s)/var(--t-footnote-lh) var(--font-ui); letter-spacing:var(--t-footnote-ls); } .t-caption { font:var(--t-caption-w) var(--t-caption-s)/var(--t-caption-lh) var(--font-ui); letter-spacing:var(--t-caption-ls); } .t-label { font:var(--t-label-w) var(--t-label-s)/var(--t-label-lh) var(--font-ui); letter-spacing:var(--t-label-ls); text-transform:none; } /* Stat numerics — big, tight, tabular (Strava-leaning data display) */ .t-stat { font:800 clamp(30px,9vw,44px)/0.95 var(--font-num); letter-spacing:-1.4px; font-variant-numeric:tabular-nums; } .t-stat-lg{ font:800 clamp(44px,16vw,68px)/0.92 var(--font-num); letter-spacing:-2.4px; font-variant-numeric:tabular-nums; } .t-stat-sm{ font:700 24px/1 var(--font-num); letter-spacing:-0.6px; font-variant-numeric:tabular-nums; } .tnum { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .t-unit { font:700 13px/1 var(--font-ui); letter-spacing:0.4px; text-transform:uppercase; color:var(--text-3); } .t-eyebrow { font:700 11px/1 var(--font-ui); letter-spacing:1.2px; text-transform:uppercase; }