/* ============================================================ CrocApp design tokens — web mirror. Canonical values live in design/*.md. If you change one, change both. Nothing generates this file. Dark theme appears TWICE on purpose: once for the explicit [data-theme="dark"] toggle, once under prefers-color-scheme for visitors who never touch the toggle. Keep the two blocks identical. No @font-face here by design: SF Pro / SF Mono are Apple system fonts and are not redistributable. See design/typography.md. ============================================================ */ :root { /* --- Brand: croc green scale --- */ --green-50: #E8F7F0; --green-100: #C9ECDC; --green-200: #97DBBD; --green-300: #57C598; --green-400: #2DC585; /* dark-mode accent */ --green-500: #22B074; --green-600: #1E9E6A; /* brand accent — light default */ --green-700: #178055; /* pressed / small accent text on light */ --green-800: #116243; --green-900: #0C4A33; /* --- Apple system semantics (light) --- */ --sys-green: #34C759; --sys-orange: #FF9500; --sys-red: #FF3B30; --sys-blue: #007AFF; --sys-yellow: #FFCC00; /* --- Labels / fills / separators (light) --- */ --ink: #000000; --paper: #FFFFFF; --label-1: rgba(0,0,0,1); --label-2: rgba(60,60,67,0.60); --label-3: rgba(60,60,67,0.30); --label-4: rgba(60,60,67,0.18); --separator: rgba(60,60,67,0.29); --separator-opaque:#C6C6C8; --fill-1: rgba(120,120,128,0.20); --fill-2: rgba(120,120,128,0.16); --fill-3: rgba(118,118,128,0.12); --fill-4: rgba(116,116,128,0.08); /* --- Backgrounds (light) --- */ --bg-base: #FFFFFF; --bg-secondary: #F2F2F7; --bg-tertiary: #FFFFFF; --bg-grouped: #F2F2F7; --bg-grouped-elevated: #FFFFFF; /* --- Liquid Glass fills (light) --- */ --glass-thin: rgba(255,255,255,0.55); --glass-regular: rgba(255,255,255,0.72); --glass-thick: rgba(255,255,255,0.86); --glass-tint-accent: rgba(30,158,106,0.12); --glass-border: rgba(255,255,255,0.60); --glass-highlight: rgba(255,255,255,0.75); /* --- Semantic aliases — consume these --- */ --color-accent: var(--green-600); --color-accent-pressed: var(--green-700); --color-accent-tint: var(--glass-tint-accent); --color-on-accent: #FFFFFF; --color-text-primary: var(--label-1); --color-text-secondary: var(--label-2); --color-text-tertiary: var(--label-3); --color-text-quaternary: var(--label-4); --color-text-on-accent: #FFFFFF; --color-text-link: var(--green-700); --color-status-success: var(--sys-green); --color-status-warning: var(--sys-orange); --color-status-error: var(--sys-red); --color-status-info: var(--sys-blue); --color-status-success-tint: rgba(52,199,89,0.14); --color-status-warning-tint: rgba(255,149,0,0.14); --color-status-error-tint: rgba(255,59,48,0.14); --color-status-info-tint: rgba(0,122,255,0.14); --color-surface-base: var(--bg-base); --color-surface-grouped: var(--bg-grouped); --color-surface-card: var(--bg-grouped-elevated); --color-surface-glass: var(--glass-regular); --color-surface-glass-thin: var(--glass-thin); --color-surface-glass-thick: var(--glass-thick); --color-separator: var(--separator); --color-fill: var(--fill-1); --color-fill-secondary: var(--fill-2); --color-fill-tertiary: var(--fill-3); --color-glass-border: var(--glass-border); --color-scrim: rgba(0,0,0,0.25); color-scheme: light; /* --- Typography --- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --type-large-title-size: 34px; --type-large-title-lh: 41px; --type-large-title-weight: 700; --type-title1-size: 28px; --type-title1-lh: 34px; --type-title1-weight: 700; --type-title2-size: 22px; --type-title2-lh: 28px; --type-title2-weight: 700; --type-title3-size: 20px; --type-title3-lh: 25px; --type-title3-weight: 600; --type-headline-size: 17px; --type-headline-lh: 22px; --type-headline-weight: 600; --type-body-size: 17px; --type-body-lh: 22px; --type-body-weight: 400; --type-callout-size: 16px; --type-callout-lh: 21px; --type-callout-weight: 400; --type-subhead-size: 15px; --type-subhead-lh: 20px; --type-subhead-weight: 400; --type-footnote-size: 13px; --type-footnote-lh: 18px; --type-footnote-weight: 400; --type-caption1-size: 12px; --type-caption1-lh: 16px; --type-caption1-weight: 400; --type-caption2-size: 11px; --type-caption2-lh: 13px; --type-caption2-weight: 400; --type-code-hero-size: 30px; --type-code-hero-lh: 38px; --type-code-body-size: 15px; --type-code-body-lh: 22px; /* --- Web display scale (landing + docs) — never used by the app --- The app scale tops out at 34px because it is a phone screen title. A landing hero on a 27" display needs more; these are fluid so the page reads the same at 375px and 1440px. Unitless line-heights. */ --type-web-hero-size: clamp(40px, 6.2vw, 68px); --type-web-hero-lh: 1.06; --type-web-hero-weight: 700; --type-web-section-size: clamp(28px, 3.6vw, 40px); --type-web-section-lh: 1.15; --type-web-section-weight: 700; --type-web-sub-size: clamp(20px, 2.4vw, 26px); --type-web-sub-lh: 1.3; --type-web-sub-weight: 600; --type-web-lead-size: clamp(17px, 1.6vw, 21px); --type-web-lead-lh: 1.5; --type-web-lead-weight: 400; --tracking-large-title: 0.37px; --tracking-title2: 0.35px; --tracking-headline: -0.43px; --tracking-body: -0.41px; --tracking-caption: 0px; --tracking-code: 0.5px; --tracking-web-hero: -1.5px; --tracking-web-section: -0.6px; --tracking-web-lead: -0.2px; /* --- 4pt spacing grid --- */ --space-0: 0px; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; /* --- Concentric radii --- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-capsule: 999px; /* --- Layout --- */ --content-max-width: 480px; --sheet-max-width: 540px; /* --- Web surfaces only (landing + docs) — never used by the app --- The app column cap is a phone-width column. A marketing page needs a page-width container, a readable prose measure and a viewport-scaled rhythm. Both clamp() ends stay on the 4pt grid. */ --content-max-width-wide: 1280px; /* hero, full-bleed rows, screenshots */ --content-max-width-web: 1080px; /* default section container */ --content-max-width-prose: 680px; /* paragraph measure, ~75ch */ --gutter-web: clamp(20px, 5vw, 48px); /* page horizontal padding */ --section-pad-web: clamp(64px, 9vw, 112px); /* vertical gap between sections */ --stack-web: clamp(32px, 4vw, 48px); /* gap between blocks in a section */ /* --- Control sizing --- */ --control-height-lg: 50px; --control-height-md: 38px; --control-height-sm: 30px; --hit-target-min: 44px; --icon-size-sm: 17px; --icon-size-md: 22px; --icon-size-lg: 28px; --border-hairline: 1px; --border-focus: 2px; /* --- Component metrics, tokenized for web --- components.md calls these component constants and keeps them inside the component. SwiftUI can do that; styles.css cannot, because the landing page forbids raw px (PLAN.md §4). Same numbers, promoted to tokens so the web side has something to name. Do not use these in the app. */ --btn-pad-x-lg: 22px; --btn-pad-x-md: var(--space-5); --btn-pad-x-sm: var(--space-4); --btn-gap-lg: var(--space-3); --btn-gap-md: 6px; --btn-gap-sm: 5px; --btn-icon-lg: 20px; --btn-icon-md: 18px; --btn-icon-sm: 15px; --pill-pad-block: 5px; --pill-pad-inline-start: 9px; --pill-pad-inline-end: 11px; --pill-icon-size: 14px; /* --- Web layout metrics (landing + docs only) --- */ --nav-height-web: 56px; /* auto-fit column floor. 232 is the largest 4pt-grid value that still fits 4 columns inside --content-max-width-web: 984 usable - 3 gaps of 16 = 936, 936 / 4 = 234. Gives 4-up at 1080, 2-up at 768, 1-up at 375. */ --grid-min-card: 232px; /* --- Glass blur --- */ --blur-thin: 12px; --blur-regular: 24px; --blur-thick: 40px; --glass-saturate: 180%; /* --- Elevation (light) --- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05); --shadow-lg: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08); --shadow-glass: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 var(--glass-highlight); --shadow-focus-ring: 0 0 0 4px var(--glass-tint-accent); /* --- Motion --- */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 360ms; --press-scale: 0.97; } /* ---- DARK: explicit toggle ---- */ [data-theme="dark"] { --sys-green: #30D158; --sys-orange: #FF9F0A; --sys-red: #FF453A; --sys-blue: #0A84FF; --sys-yellow: #FFD60A; --ink: #FFFFFF; --paper: #000000; --label-1: rgba(255,255,255,1); --label-2: rgba(235,235,245,0.60); --label-3: rgba(235,235,245,0.30); --label-4: rgba(235,235,245,0.16); --separator: rgba(84,84,88,0.65); --separator-opaque:#38383A; --fill-1: rgba(120,120,128,0.36); --fill-2: rgba(120,120,128,0.32); --fill-3: rgba(118,118,128,0.24); --fill-4: rgba(118,118,128,0.18); --bg-base: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --bg-grouped: #000000; --bg-grouped-elevated: #1C1C1E; --glass-thin: rgba(30,30,32,0.55); --glass-regular: rgba(28,28,30,0.68); --glass-thick: rgba(28,28,30,0.86); --glass-tint-accent: rgba(45,197,133,0.16); --glass-border: rgba(255,255,255,0.14); --glass-highlight: rgba(255,255,255,0.10); --color-accent: var(--green-400); --color-accent-pressed: var(--green-500); --color-on-accent: #05271A; --color-text-link: var(--green-400); --color-text-on-accent: #05271A; --color-status-success-tint: rgba(48,209,88,0.18); --color-status-warning-tint: rgba(255,159,10,0.18); --color-status-error-tint: rgba(255,69,58,0.18); --color-status-info-tint: rgba(10,132,255,0.18); --color-scrim: rgba(0,0,0,0.5); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5); --shadow-glass: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 var(--glass-highlight); color-scheme: dark; } /* ---- DARK: OS preference, unless the visitor forced light ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sys-green: #30D158; --sys-orange: #FF9F0A; --sys-red: #FF453A; --sys-blue: #0A84FF; --sys-yellow: #FFD60A; --ink: #FFFFFF; --paper: #000000; --label-1: rgba(255,255,255,1); --label-2: rgba(235,235,245,0.60); --label-3: rgba(235,235,245,0.30); --label-4: rgba(235,235,245,0.16); --separator: rgba(84,84,88,0.65); --separator-opaque:#38383A; --fill-1: rgba(120,120,128,0.36); --fill-2: rgba(120,120,128,0.32); --fill-3: rgba(118,118,128,0.24); --fill-4: rgba(118,118,128,0.18); --bg-base: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --bg-grouped: #000000; --bg-grouped-elevated: #1C1C1E; --glass-thin: rgba(30,30,32,0.55); --glass-regular: rgba(28,28,30,0.68); --glass-thick: rgba(28,28,30,0.86); --glass-tint-accent: rgba(45,197,133,0.16); --glass-border: rgba(255,255,255,0.14); --glass-highlight: rgba(255,255,255,0.10); --color-accent: var(--green-400); --color-accent-pressed: var(--green-500); --color-on-accent: #05271A; --color-text-link: var(--green-400); --color-text-on-accent: #05271A; --color-status-success-tint: rgba(48,209,88,0.18); --color-status-warning-tint: rgba(255,159,10,0.18); --color-status-error-tint: rgba(255,69,58,0.18); --color-status-info-tint: rgba(10,132,255,0.18); --color-scrim: rgba(0,0,0,0.5); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5); --shadow-glass: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 var(--glass-highlight); color-scheme: dark; } } /* ============================================================ Base element defaults ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--tracking-body); color: var(--color-text-primary); background: var(--color-surface-grouped); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } code, kbd, pre, samp { font-family: var(--font-mono); } a { color: var(--color-text-link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } a:active { opacity: 0.7; } :focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } ::selection { background: var(--color-accent-tint); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--color-fill); border-radius: var(--radius-capsule); } ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ Type helpers — tokens above stay the source of truth ============================================================ */ .t-large-title { font: var(--type-large-title-weight) var(--type-large-title-size)/var(--type-large-title-lh) var(--font-sans); letter-spacing: var(--tracking-large-title); } .t-title2 { font: var(--type-title2-weight) var(--type-title2-size)/var(--type-title2-lh) var(--font-sans); letter-spacing: var(--tracking-title2); } .t-title3 { font: var(--type-title3-weight) var(--type-title3-size)/var(--type-title3-lh) var(--font-sans); } .t-headline { font: var(--type-headline-weight) var(--type-headline-size)/var(--type-headline-lh) var(--font-sans); letter-spacing: var(--tracking-headline); } .t-body { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--font-sans); letter-spacing: var(--tracking-body); } .t-callout { font: var(--type-callout-weight) var(--type-callout-size)/var(--type-callout-lh) var(--font-sans); } .t-footnote { font: var(--type-footnote-weight) var(--type-footnote-size)/var(--type-footnote-lh) var(--font-sans); } .t-caption { font: var(--type-caption1-weight) var(--type-caption1-size)/var(--type-caption1-lh) var(--font-sans); } .t-code { font: var(--weight-medium) var(--type-code-body-size)/var(--type-code-body-lh) var(--font-mono); letter-spacing: var(--tracking-code); } /* Web display helpers. Written longhand, not with the `font:` shorthand: the shorthand's `size/line-height` slot does not reliably survive a clamp() substituted through var(). */ .t-web-hero { font-family: var(--font-sans); font-size: var(--type-web-hero-size); line-height: var(--type-web-hero-lh); font-weight: var(--type-web-hero-weight); letter-spacing: var(--tracking-web-hero); } .t-web-section { font-family: var(--font-sans); font-size: var(--type-web-section-size); line-height: var(--type-web-section-lh); font-weight: var(--type-web-section-weight); letter-spacing: var(--tracking-web-section); } .t-web-sub { font-family: var(--font-sans); font-size: var(--type-web-sub-size); line-height: var(--type-web-sub-lh); font-weight: var(--type-web-sub-weight); letter-spacing: var(--tracking-web-section); } .t-web-lead { font-family: var(--font-sans); font-size: var(--type-web-lead-size); line-height: var(--type-web-lead-lh); font-weight: var(--type-web-lead-weight); letter-spacing: var(--tracking-web-lead); } @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }