/* Gamic Arts — design tokens, ported verbatim from the design system bundle. Source: _ds/gamic-arts-design-system-.../tokens/*.css — these are the brand. */ /* ---- fonts ---------------------------------------------------------------- UI text uses the Apple system stack (no webfont). Gabarito = brand/display. */ @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap'); /* ---- color (light, default) ---------------------------------------------- */ :root { /* Neutrals — warm-toned whites & blacks */ --paper: oklch(0.988 0.006 80); /* app canvas */ --surface: oklch(0.999 0.003 85); /* cards, bars */ --surface-inset: oklch(0.962 0.008 80); /* grouped-list canvas, wells */ --surface-raised: oklch(1 0 0); /* sheets, popovers */ --fg-1: oklch(0.235 0.014 55); /* primary text */ --fg-2: oklch(0.46 0.018 55); /* secondary text */ --fg-3: oklch(0.615 0.018 60); /* tertiary / placeholder */ --fg-4: oklch(0.78 0.014 70); /* disabled / quaternary */ --separator: oklch(0.90 0.010 75); --separator-strong: oklch(0.845 0.012 72); /* Brand accent — Ember (coral) */ --ember: oklch(0.655 0.155 40); --ember-strong: oklch(0.575 0.16 38); /* pressed / emphasis */ --ember-soft: oklch(0.945 0.028 45); /* tinted fills */ --ember-softer: oklch(0.972 0.016 48); /* tinted rows, hovers */ --on-ember: oklch(0.995 0.005 60); /* Semantic */ --positive: oklch(0.60 0.125 155); --positive-soft: oklch(0.945 0.030 155); --negative: oklch(0.575 0.185 27); --negative-soft: oklch(0.945 0.030 27); --caution: oklch(0.72 0.135 78); --caution-soft: oklch(0.955 0.035 82); /* Per-app accents — same lightness/chroma family, warm hue walk */ --accent-tally: oklch(0.655 0.155 40); /* coral (suite default) */ --accent-jot: oklch(0.655 0.135 70); /* amber */ --accent-tabbuddy: oklch(0.655 0.145 22); /* rose */ --accent-backlog: oklch(0.655 0.135 55); /* tangerine */ /* Semantic aliases */ --text-body: var(--fg-1); --text-secondary: var(--fg-2); --accent: var(--ember); --accent-soft: var(--ember-soft); --surface-card: var(--surface); --bg-canvas: var(--paper); color-scheme: light; } /* ---- dark appearance ------------------------------------------------------ Apply data-theme="dark" on or any subtree root. */ [data-theme="dark"] { --paper: oklch(0.205 0.010 55); --surface: oklch(0.255 0.011 55); --surface-inset: oklch(0.175 0.010 55); --surface-raised: oklch(0.30 0.012 55); --fg-1: oklch(0.965 0.006 80); --fg-2: oklch(0.76 0.012 70); --fg-3: oklch(0.60 0.014 65); --fg-4: oklch(0.45 0.012 60); --separator: oklch(0.335 0.011 55); --separator-strong: oklch(0.40 0.012 55); --ember: oklch(0.72 0.15 42); --ember-strong: oklch(0.78 0.14 45); --ember-soft: oklch(0.32 0.045 42); --ember-softer: oklch(0.275 0.026 45); --on-ember: oklch(0.185 0.02 45); --positive: oklch(0.70 0.12 155); --positive-soft: oklch(0.30 0.04 155); --negative: oklch(0.68 0.17 27); --negative-soft: oklch(0.30 0.05 27); --caution: oklch(0.78 0.13 80); --caution-soft: oklch(0.31 0.045 82); --accent-tally: oklch(0.72 0.15 42); --accent-jot: oklch(0.72 0.13 72); --accent-tabbuddy: oklch(0.72 0.14 24); --accent-backlog: oklch(0.72 0.13 57); color-scheme: dark; } /* ---- typography ----------------------------------------------------------- */ :root { --font-ui: -apple-system, system-ui, 'Helvetica Neue', Helvetica, sans-serif; --font-display: 'Gabarito', -apple-system, system-ui, sans-serif; /* brand & big titles */ --font-serif: 'Literata', 'New York', Georgia, serif; /* reading surfaces (Jot) */ --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* numerals (Tally) */ /* Scale — iOS-derived */ --text-largetitle: 600 34px/1.2 var(--font-display); --text-title1: 600 28px/1.25 var(--font-display); --text-title2: 600 22px/1.27 var(--font-display); --text-title3: 600 20px/1.3 var(--font-ui); --text-headline: 600 17px/1.3 var(--font-ui); --text-body-style: 400 17px/1.42 var(--font-ui); --text-callout: 400 16px/1.4 var(--font-ui); --text-subhead: 400 15px/1.35 var(--font-ui); --text-footnote: 400 13px/1.35 var(--font-ui); --text-caption: 400 12px/1.3 var(--font-ui); --text-reading: 400 18px/1.62 var(--font-serif); /* Jot note body */ --text-amount: 500 17px/1.3 var(--font-mono); /* Tally money */ --text-amount-big: 600 34px/1.15 var(--font-mono); /* Tracking */ --tracking-tight: -0.02em; /* display sizes */ --tracking-caps: 0.06em; /* uppercase labels */ } /* ---- spacing & layout (4pt base) ------------------------------------------ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --inset-screen: 20px; /* horizontal screen margin, iPhone */ --inset-screen-pad: 24px; /* iPad regular width */ --hit-target: 44px; /* minimum touch target */ --row-height: 52px; /* standard list row */ --navbar-height: 52px; --tabbar-height: 56px; } /* ---- radii, elevation, motion --------------------------------------------- */ :root { --radius-sm: 7px; /* badges, small controls */ --radius-md: 11px; /* buttons, inputs, rows */ --radius-lg: 15px; /* cards */ --radius-xl: 22px; /* sheets, modals */ --radius-full: 999px; /* pills, segmented */ --shadow-1: 0 1px 2px oklch(0.3 0.02 55 / 0.06); --shadow-2: 0 2px 8px oklch(0.3 0.02 55 / 0.08), 0 1px 2px oklch(0.3 0.02 55 / 0.05); --shadow-3: 0 8px 28px oklch(0.3 0.02 55 / 0.13), 0 2px 6px oklch(0.3 0.02 55 / 0.06); --card-border: 1px solid var(--separator); --blur-bar: saturate(1.6) blur(18px); /* nav/tab bar backdrop */ --bar-tint: oklch(0.988 0.006 80 / 0.78); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-med: 240ms; --dur-slow: 380ms; } [data-theme="dark"] { --bar-tint: oklch(0.205 0.010 55 / 0.78); --shadow-1: 0 1px 2px oklch(0 0 0 / 0.25); --shadow-2: 0 2px 8px oklch(0 0 0 / 0.32), 0 1px 2px oklch(0 0 0 / 0.2); --shadow-3: 0 8px 28px oklch(0 0 0 / 0.45), 0 2px 6px oklch(0 0 0 / 0.25); } /* ---- base resets ---------------------------------------------------------- */ body { margin: 0; background: var(--paper); color: var(--fg-1); font: var(--text-body-style); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--ember); text-decoration: none; } a:hover { color: var(--ember-strong); } ::selection { background: var(--ember-soft); }