/* PeePal design tokens — the canonical token file for every PeePal surface. This file is the canonical token file. A token value is decided where its options can be seen side by side and lands here, by hand, in an accepted design goal. Nothing generates this file and nothing overwrites it (design/governance.md, "Direction of truth"). Two consumers, checked mechanically: 1. site/tokens.css is a byte-identical copy of this file, served to the browser. scripts/check-static-site-tokens.sh fails if the two differ, so the copy cannot drift. Change this file, copy it across, and bump CACHE_NAME in site/diary/sw.js. 2. ios/PeePal/PeePal/DesignSystem/ carries the native palette in Swift. Each token below that has a native counterpart names it in a `swift:` annotation, and scripts/validate-design-inventory.sh checks the value. The validator reports drift; it never edits Swift. Annotation grammar, read by scripts/validate_design_inventory.py: swift: PeePalColor.primaryDefault The Swift symbol must resolve to this token's own value. swift: PeePalColor.someRole = #ABCDEF The two surfaces deliberately resolve this role to different values. The Swift symbol must equal the value stated here. The validator prints every one of these as a DRIFT line on each run, so a divergence stays visible rather than becoming invisible by being written down once. No token currently uses this form: the native palette resolves every shared role to the value below it, and the validator reports zero drift. Adding one back is a deliberate decision to split a role across the two surfaces, not a shortcut for a Swift value that has not been moved yet. swift: none Web-only token with no native counterpart. Symbols with no web counterpart at all are listed under "Native-only" at the foot of this file, so "unannotated" stays a real signal rather than noise. PeePalSpacing and PeePalMotion are out of the validator's scope and have no tokens here: the web surface uses a rem-based spacing scale and CSS transitions, not the native 4/8/12 pt step scale or its animation durations. There is no shared value to check. Loaded before styles.css on every page, so styles.css may reference every custom property below without defining any of them. Both files are read together by scripts/check-static-site-design.sh; site/diary/sw.js precaches the served copy and scripts/check-static-site-cache-name.sh watches it. */ :root { /* Colours */ --primary: #097A6F; /* swift: PeePalColor.primaryDefault */ --primary-dark: #064E47; /* swift: PeePalColor.primaryDark */ --primary-light: #DCEFEB; /* swift: PeePalColor.primaryLight */ --primary-10: rgba(9, 122, 111, 0.10); /* swift: none */ --primary-15: rgba(9, 122, 111, 0.15); /* swift: none */ --primary-20: rgba(9, 122, 111, 0.20); /* swift: none */ --primary-30: rgba(9, 122, 111, 0.30); /* swift: none */ --terracotta: #E8895A; /* swift: PeePalColor.secondaryDefault */ --terracotta-text: #B85C32; /* swift: PeePalColor.accentText */ --honey: #F2B441; /* swift: PeePalColor.honey */ --accent: var(--terracotta); /* swift: PeePalColor.accentDefault */ /* Decorative sage for fills and soft surfaces; not status text. Web only: no native surface uses it. */ --sage: #6E9F80; /* swift: none */ /* Semantic success for positive status text and icons. */ --success: #2D8A4E; /* swift: PeePalColor.semanticSuccess */ --warning: #9A6418; /* swift: PeePalColor.semanticWarning */ --error: #B04436; /* swift: PeePalColor.semanticError */ /* The pressed/hover step under --error. Promoted from a literal so the destructive control's two states move together. */ --error-dark: #8F342A; /* swift: none */ /* --error at 40%, matching the --primary-NN alpha idiom above. Border only: it is decorative weight, never a text colour. */ --error-40: rgba(176, 68, 54, 0.40); /* swift: none */ /* Surface behind a form-level failure row; never applied to a field. Body text on it is warm ink at 12.90:1 (design/colour.md). */ --error-tint: #F6E5E2; /* swift: none */ /* The warm ink at 45%, promoted from the literal .diary-dialog::backdrop already used. Not a brand colour, and not tinted green. */ --scrim: rgba(43, 33, 26, 0.45); /* swift: none */ /* Alias, not a new colour: the unselected track behind a segmented choice. */ --segment-track: var(--bg-muted); /* swift: none */ /* Semantic aliases */ --ring: var(--primary); /* swift: none */ --bg-primary-soft: var(--primary-10); /* swift: none */ --surface: #FFFFFF; /* swift: PeePalColor.card */ --surface-raised: #FFFDF9; /* swift: none */ /* Warm elevation */ --shadow-sm: 0 8px 22px rgba(68, 49, 31, 0.08); /* swift: none */ --shadow-md: 0 14px 34px rgba(68, 49, 31, 0.11); /* swift: none */ --shadow-lg: 0 18px 46px rgba(68, 49, 31, 0.14); /* swift: none */ /* Backgrounds */ --bg: #FBF8F3; /* swift: PeePalColor.backgroundPrimary */ --bg-warm: #F4EEE4; /* swift: PeePalColor.backgroundSecondary */ --bg-muted: #EFE7DB; /* swift: PeePalColor.backgroundTertiary */ /* --bg at 96%, for the sticky header that content scrolls beneath. A literal over a known ground, promoted so the pair cannot drift. */ --bg-translucent: rgba(251, 248, 243, 0.96); /* swift: none */ /* Text */ --fg: #2B211A; /* swift: PeePalColor.textPrimary */ --fg-muted: #5F5148; /* swift: PeePalColor.textSecondary */ --fg-subtle: #7B6F65; /* swift: PeePalColor.textTertiary */ /* Borders */ --border: #DED4C6; /* swift: PeePalColor.borderDefault */ --border-strong: #C9BAA8; /* swift: PeePalColor.borderStrong */ /* Beverage accents The drink kinds, in the order BeverageType declares them. Imported from the design system with the Home five-day diary: the kind dot on a diary entry row takes the drink's accent, and the Log intake tiles take the same value, so the two surfaces cannot drift apart by being typed twice. Colour is a second cue only — every row states its kind in words — so these are never the sole carrier of meaning. */ --bev-water: #3B82F6; /* swift: PeePalColor.bevWater */ --bev-tea: #10B981; /* swift: PeePalColor.bevTea */ --bev-coffee: #92400E; /* swift: PeePalColor.bevCoffee */ --bev-decaf: #D97706; /* swift: PeePalColor.bevDecaf */ --bev-juice: #F59E0B; /* swift: PeePalColor.bevJuice */ --bev-fizzy: #8B5CF6; /* swift: PeePalColor.bevFizzy */ --bev-alcohol: #EF4444; /* swift: PeePalColor.bevAlcohol */ --bev-dairy-milk: #F3F4F6; /* swift: PeePalColor.bevDairyMilk */ --bev-nondairy-milk: #A7F3D0; /* swift: PeePalColor.bevNonDairyMilk */ --bev-other: #6B7280; /* swift: PeePalColor.bevOther */ /* Primary foreground (text on primary bg) */ --primary-fg: #FFFFFF; /* swift: none */ /* --primary-fg at 76% for secondary text reversed out on --primary-dark. Composites to #C3D5D3 at 6.30:1 (design/colour.md). */ --primary-fg-muted: rgba(255, 255, 255, 0.76); /* swift: none */ /* Typography No native counterpart: iOS renders the platform face through Font.Typography, not a token value. */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* swift: none */ /* The share text is a frequency-volume chart; its columns only line up in a fixed-width face. System stack, like --font: no font CDN on this site. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* swift: none */ /* Shape Both surfaces run the same radius scale under shared names: 8 · 14 · 20 · 999 plus the 22px sheet. Native carries three further steps with no web token — 0, and the 20/28 above the shared scale — so PeePalRadius.lg and PeePalRadius.xl both resolve to 20. */ --radius-sm: 8px; /* swift: PeePalRadius.sm */ --radius-md: 14px; /* swift: PeePalRadius.md */ --radius-lg: 20px; /* swift: PeePalRadius.lg */ --radius-pill: 999px; /* swift: PeePalRadius.full */ /* One step above --radius-lg, for the top corners of the docked entry sheet. */ --radius-sheet: 22px; /* swift: PeePalRadius.sheet */ /* Spacing */ --max-w: 1024px; /* swift: none */ --max-w-prose: 768px; /* swift: none */ --max-w-narrow: 640px; /* swift: none */ --px: 1.5rem; /* swift: none */ --section-py: 4rem; /* swift: none */ /* Controls --tap-min is the floor for any control in a form or the action dock. Inline row actions (Edit, Delete) keep the 44px minimum. --field-message is the smallest type permitted in a form. Neither has a native token: iOS inherits the 44 pt HIG minimum and Dynamic Type rather than pinning a value. */ --tap-min: 48px; /* swift: none */ --field-message: 0.9rem; /* swift: none */ } /* Native-only tokens. Symbols declared under ios/PeePal/PeePal/DesignSystem/ in the two families this file covers (PeePalColor, PeePalRadius) that deliberately have no web counterpart. Listing them here is what lets the validator treat an unannotated symbol as a real finding. The dark appearance is native-only in full: site/ has no dark mode, and a warm dark palette is not derivable from the light one. swift-only: PeePalColor.neutralWarm swift-only: PeePalColor.semanticInfo swift-only: PeePalColor.darkBackgroundPrimary swift-only: PeePalColor.darkBackgroundSecondary swift-only: PeePalColor.darkBackgroundTertiary swift-only: PeePalColor.darkTextPrimary swift-only: PeePalColor.darkTextSecondary swift-only: PeePalColor.darkTextTertiary swift-only: PeePalColor.darkBorderDefault swift-only: PeePalColor.darkBorderStrong swift-only: PeePalColor.darkPrimary swift-only: PeePalColor.darkSemanticSuccess swift-only: PeePalColor.darkSemanticWarning swift-only: PeePalColor.darkSemanticError swift-only: PeePalColor.darkSemanticInfo swift-only: PeePalRadius.none swift-only: PeePalRadius.xl swift-only: PeePalRadius._2xl */