/* ============================================================ INTERVOLITION — design tokens Generated from DESIGN.md (the SSOT). Components read these; nothing re-declares a brand value. Provenance: [context] extracted from the iOS source — Theme/AppTheme.swift, CustomButtons.swift, IntervalTypeLabel.swift, ArcProgressView.swift, IntervolitionLiveActivity.swift, SplashScreenView.swift, project.yml. [derived] computed from a context fact (e.g. SwiftUI system colors resolved to their iOS hex values, contrast ratios, the arc stroke ratio). [proposed] this run's draft for values the app never needed (web doc scale, spacing), awaiting Brett's review. Default skin = the app's default ThemeMode: DARK [context: AppSettings.init falls back to .dark]. The second skin — "Potatuhs" — is encoded as a working alternate in alternates.css, exactly as AppTheme.swift encodes it. ============================================================ */ :root { /* ---- The accent — Dark mode runs on system blue [context: AppTheme.accent = .blue; hex resolved to iOS systemBlue dark variant, [derived]] ---- */ --accent: #0A84FF; --accent-light: #007AFF; /* iOS light variant [derived] */ /* ---- The Potatuhs skin constants [context: AppTheme.swift, comments carry these exact hex values] ---- */ --po-orange: #E16416; /* accent */ --po-amber: #E19816; /* accentSecondary */ --po-gold: #E1C916; /* accentTertiary */ --po-cream: #FDF5EB; /* background */ --po-ink: #1C1917; /* textPrimary */ --po-gray: #666666; /* textSecondary */ /* Vertical, top → bottom, three stops [context: accentGradient] */ --gradient-interval: linear-gradient(180deg, var(--po-orange), var(--po-amber), var(--po-gold)); /* ---- Interval-type semantics [context: LiveActivity colorForIntervalType(); hex = iOS system palette, dark variants, [derived]] ---- */ --int-active: #30D158; /* Active · green · flame.fill */ --int-inactive: #FF9F0A; /* Inactive · orange · pause.fill */ --int-break: #0A84FF; /* Break · blue · cup.and.saucer.fill */ --int-countdown: #BF5AF2; /* Countdown · purple · timer */ /* ---- Control semantics [context: CustomButtons.swift; hex [derived] from SwiftUI system palette, dark variants] ---- */ --sem-go: #30D158; /* start */ --sem-halt: #FF453A; /* stop, reset */ --sem-shift: #FFD60A; /* edit, yield, skip, previous */ --sem-accent: var(--accent); /* pause, add, down, sound */ --sem-silence: #000000; /* silence [context: Color.black] */ /* Text on the accent fill [context: labelActiveText — WHITE in dark mode, INK in potatuhs mode (the app deliberately avoids white-on-orange, which fails AA)] */ --on-accent: #FFFFFF; /* The icon field — black in BOTH skins [context: app icon] */ --field-black: #000000; /* Fill = the semantic color at 20% [context: .opacity(0.2)] — components derive it with color-mix, never a new hex. */ /* ---- Document surfaces (dark skin) ---- */ --surface: #0B0B0D; /* [proposed] doc canvas, one step off pure black */ --surface-2: #131317; /* [proposed] alternating section tint */ --surface-showcase: #000000; /* [context: app icon field & dark systemBackground] */ --card: #17171B; /* [proposed] raised panel */ --text: #F5F5F7; /* [derived: iOS label, dark] */ --text-2: #98989F; /* [derived: iOS secondaryLabel, dark] */ --line: #26262B; /* [proposed] hairline */ /* Arc track: gray at 30% on dark [context: Color.gray.opacity(0.3)] */ --arc-track: rgba(142, 142, 147, 0.3); --arc-fill: var(--accent); /* arcForeground = accent [context] */ /* ---- Typography — the three voices [context] ---- Rounded = identity (splash wordmark: 40pt bold rounded) Mono = time (timer numerals: monospaced bold) System = interface (everything else: SF defaults) Web stacks [derived]: ui-rounded/ui-monospace hit SF Rounded & SF Mono on Apple hardware; Nunito / IBM Plex Mono are the cross-platform fallbacks. */ --font-display: ui-rounded, 'Nunito', 'Trebuchet MS', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace; --font-time: var(--font-mono); /* the time face; alternates.css can flip it */ /* ---- Type scale ---- App pt anchors [context]: 50 seconds-only numeral · 48 track points · 40 splash wordmark · 32 m:ss numeral · 18 config name / focus item · 16 day-event · 14 mono labels · 12 caption. Doc scale [proposed], display levels fluid: */ --text-hero: clamp(3rem, 2rem + 4.5vw, 5.25rem); --text-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem); --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); --text-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --text-h4: 1.05rem; --text-body-lg: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem); --text-body: 1rem; --text-body-sm: 0.9rem; --text-caption: 0.8rem; --text-label: 0.72rem; /* Timer numerals, mapped from the app's own two sizes [context] */ --text-time-lg: clamp(3.5rem, 2.5rem + 5vw, 6.25rem); /* 50pt class */ --text-time-md: clamp(2.25rem, 1.8rem + 2.2vw, 4rem); /* 32pt class */ /* ---- Spacing — 4pt base [proposed; app leans on 6/12/16pt paddings: label 12×6, default padding 16] ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2.5rem; --sp-7: 4rem; --sp-8: 6rem; --section-pad: clamp(4rem, 8vw, 7rem); /* ---- Radii [context]: progress bar 4 · card 8 · label pill 10; xl [proposed]; controls are perfect circles ---- */ --r-sm: 4px; --r-md: 8px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px; /* ---- Borders — the app draws almost none; the doc keeps one hairline weight [proposed] ---- */ --border-w: 1px; --border: var(--border-w) solid var(--line); /* ---- Shadows — NONE. Zero shadow calls in the entire app [context: repo grep]. Depth = fill opacity, never elevation. ---- */ --sh-none: none; /* ---- Motion [context] ---- 200ms arc-opacity swap · 300ms label/type swap · 500ms arc progress ease-out & splash crossfade · splash fill 3000ms, name at +1000ms over 1000ms, dismiss at +3500ms */ --dur-fast: 200ms; --dur-normal: 300ms; --dur-slow: 500ms; --dur-fill: 3000ms; --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-out: cubic-bezier(0, 0, 0.58, 1); /* ---- The arc [context: ArcProgressView] ---- stroke = size / 15 (10pt at 150pt) · round caps · starts at 12 o'clock (rotated −90°) · sweeps clockwise */ --arc-size: 150px; --arc-stroke: 10px; /* ---- Controls [context: CustomButtons] ---- */ --btn-sm: 30px; --btn-md: 44px; /* = Apple minimum touch target */ --btn-lg: 58px; /* icon = 50% of the control's diameter [context] */ /* ---- Layout [proposed] ---- */ --max-w: 72rem; --max-w-narrow: 46rem; --max-w-wide: 88rem; --nav-w: 232px; }