/* ============================================================ Optimiser — Colors & Type Dark ink + burnt amber + glassmorphism. Mobile-first PWA. ============================================================ */ /* ---------- Fonts ---------- System uses Apple SF Pro on iOS (the target platform). For web previews where SF Pro isn't available, we fall back to Inter (similar geometric grotesque). If you have SF Pro licensed binaries, drop them in fonts/ and update the @font-face. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2-variations"); } :root { /* ============ COLOR — Base ============ */ /* Backgrounds — warm ink, not navy */ --bg: #0a0806; /* canvas — deep ink */ --bg-2: #110d09; /* one step up — slight elevation */ --bg-3: #181210; /* modals, sheets */ --bg-ink: #050302; /* deepest, used behind FloatingLines */ /* Glass surfaces (layered over FloatingLines) */ --glass-1: rgba(232, 217, 189, 0.04); /* default card */ --glass-2: rgba(232, 217, 189, 0.06); /* hover / raised */ --glass-3: rgba(232, 217, 189, 0.08); /* selected / pressed-in */ --glass-border: rgba(232, 217, 189, 0.10); --glass-border-strong: rgba(232, 217, 189, 0.18); /* Text — sand on ink */ --fg: #e8d9bd; /* primary text — warm sand */ --fg-2: #c8b896; /* secondary */ --fg-dim: #9a8b6e; /* tertiary / labels */ --fg-faint: #6b5d44; /* placeholder / disabled */ --fg-on-accent: #180d05; /* text on amber buttons */ /* Accents — amber family (Dune cinematic). Four steps so cards/states have real contrast: deep → ember-dark, used for pressed/dim borders accent → the primary amber, primary action colour hi → lighter, used for hover / shine glow → light cream, used for highlights, focus glows */ --accent-deep: #8a4a1a; /* ember dark — pressed / borders */ --accent: #c4874b; /* PRIMARY — burnt amber */ --accent-hi: #e0a766; /* hover / hi */ --accent-glow-c: #f4c987; /* light cream amber — highlights */ --accent-dim: #6b3e16; /* deepest, low-light surfaces */ --accent-glow: rgba(244, 201, 135, 0.35); /* Semantic — tuned to the warm palette */ --good: #7da967; /* sage */ --warn: #e0a766; /* amber-hi (doubles as warn) */ --danger: #c4453a; /* clay red */ --info: var(--accent); /* Gradients (the brand DNA) */ --grad-line: linear-gradient(90deg, #8a4a1a 0%, #c4874b 50%, #f4c987 100%); --grad-line-soft: linear-gradient(90deg, rgba(196,135,75,0.7), rgba(244,201,135,0.7)); --grad-bg-glow: radial-gradient(1000px 500px at 80% -10%, rgba(196,135,75,0.08), transparent), radial-gradient(800px 400px at -20% 110%, rgba(138,74,26,0.06), transparent); /* ============ TYPE — Base ============ */ --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --ff-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — mobile-first; sizes are deliberate, not modular */ --fs-display: 32px; /* hero numbers (WAM, gym totals) */ --fs-h1: 22px; /* screen titles */ --fs-h2: 17px; /* card headers, in-screen sections */ --fs-h3: 15px; /* sub-sections */ --fs-body: 15px; --fs-meta: 13px; --fs-micro: 11px; /* tab labels, captions */ --lh-tight: 1.15; --lh-snug: 1.30; --lh-body: 1.45; --lh-loose: 1.60; --ls-tight: -0.5px; --ls-display: -0.8px; /* applied to display-sized numbers */ --ls-mono: 0; --ls-caps: 0.6px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ============ SHAPE & MOTION ============ */ --radius-sm: 8px; --radius-md: 12px; /* buttons, pills */ --radius-lg: 16px; /* cards (default) */ --radius-xl: 20px; /* large feature cards */ --radius-full: 999px; --blur-glass: blur(20px) saturate(140%); --blur-soft: blur(10px) saturate(120%); /* Shadows / glows — used sparingly. The FloatingLines bg already creates atmosphere, so cards lean on borders + blur, not shadows. */ --shadow-card: 0 1px 0 rgba(232,217,189,0.04) inset, 0 8px 32px rgba(0,0,0,0.40); --shadow-raised: 0 1px 0 rgba(232,217,189,0.06) inset, 0 16px 48px rgba(0,0,0,0.55); --glow-amber: 0 0 0 1px rgba(196,135,75,0.40), 0 0 24px rgba(244,201,135,0.18) inset; --glow-ember: 0 0 0 1px rgba(138,74,26,0.55), 0 0 24px rgba(138,74,26,0.20) inset; /* Spacing — 4px base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; /* Motion */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 100ms; /* tap feedback */ --dur-normal: 200ms; /* hover, tab cross-fade */ --dur-slow: 600ms; /* chart line draw, value pulse */ } /* ============ TYPE — Semantic Roles ============ Use these as classes on elements. The scale is the source of truth. */ .t-display { font-family: var(--ff-display); font-size: var(--fs-display); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; } .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } .t-h2 { font-family: var(--ff-sans); font-size: var(--fs-h2); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: -0.2px; } .t-h3 { font-family: var(--ff-sans); font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-snug); } .t-body { font-family: var(--ff-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); } .t-meta { font-family: var(--ff-sans); font-size: var(--fs-meta); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg-dim); } .t-micro { font-family: var(--ff-sans); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-dim); } .t-mono { font-family: var(--ff-mono); font-size: 13px; letter-spacing: -0.1px; } .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Accent role */ .t-accent { color: var(--accent); } .t-accent-hi { color: var(--accent-hi); } .t-accent-deep { color: var(--accent-deep); } .t-dim { color: var(--fg-dim); } .t-faint { color: var(--fg-faint); }