/* ============================================================================ FindOffCampus — design tokens Palette: Onyx (true black + champagne) Direction: flat, 2D, native-iOS. Elevation comes from hairlines and surface steps, never from shadows, glows, or 3D transforms. This is the only file that defines raw colour, size or timing values. Components consume tokens; they never hardcode. ============================================================================ */ :root { /* -------------------------------------------------------------------- 1. COLOUR — Onyx -------------------------------------------------------------------- */ /* Surfaces. Each step is a flat tone change; there is no shadow between them. Going up the scale means "closer to the user". */ --c-ground: #000000; /* app background — OLED pixels off */ --c-surface: #0A0A0A; /* cards, sheets, wallet */ --c-raised: #141414; /* inputs, skeletons, media at rest */ --c-raised-hi: #1C1C1C; /* pressed/hover state of a raised element */ /* Hairlines do the job shadows would do elsewhere. */ --c-line: #232323; /* standard border, divider */ --c-line-strong: #333333; /* emphasised border, focus-adjacent */ --c-line-faint: #171717; /* subtle internal rules */ /* Text */ --c-text: #FAFAFA; /* primary — 19.6:1 on ground */ --c-text-muted: #8A8A8A; /* secondary, captions — 6.0:1 */ --c-text-faint: #5A5A5A; /* disabled, placeholder — decorative only */ --c-text-on-gold: #000000; /* text sitting on a champagne fill */ /* Accent — champagne. Structural light, not colour. Rationed to: hairline edges on elevated surfaces, the verified seal, the bump pill, the wallet balance, and ONE filled button per screen. Never body text, headings, nav state, or large fills. */ --c-gold: #E8D9A8; /* 14.6:1 on ground */ --c-gold-dim: #B8AC84; /* gold at rest / secondary gold text */ --c-gold-wash: rgba(232, 217, 168, 0.09); /* tinted fill behind gold text */ --c-gold-edge: rgba(232, 217, 168, 0.30); /* gold hairline */ /* Semantic. Deliberately NOT gold — an approval must never read as a payment. These are the only other saturated colours in the system. */ --c-success: #5CC08D; --c-success-wash: rgba(92, 192, 141, 0.10); --c-danger: #F2635C; --c-danger-wash: rgba(242, 99, 92, 0.10); --c-warning: #E0A93B; --c-warning-wash: rgba(224, 169, 59, 0.10); /* Categorical tints — for telling things APART, never for good and bad. ------------------------------------------------------------------------ Gold and the three semantic colours between them can say "valuable", "worked", "broke" and "careful", and nothing else. That left every list on the services side — four poll options, two kinds of challenge, a row of tools — rendered in one colour, which made them read as one undifferentiated thing. These six are the answer, and the rules for them are narrow: * they identify, they do not rank. A poll option is teal because it is the third option, not because third is bad. * they stay OFF the semantic colours' territory. Whether something succeeded is still said in green and only in green. * they are muted on purpose. Chroma is kept close to the gold's so a list of six does not turn the private-members-club palette into a children's chart. Every one of them clears 7:1 on the ground. Used for: poll option bars, challenge kinds, tool tiles. */ --c-tint-1: #7FA8D9; /* blue */ --c-tint-2: #A493D6; /* violet */ --c-tint-3: #6FBFB4; /* teal */ --c-tint-4: #E0917C; /* coral */ --c-tint-5: #D690B0; /* pink */ --c-tint-6: #C3B57E; /* olive */ --c-tint-1-wash: rgba(127, 168, 217, 0.14); --c-tint-2-wash: rgba(164, 147, 214, 0.14); --c-tint-3-wash: rgba(111, 191, 180, 0.14); --c-tint-4-wash: rgba(224, 145, 124, 0.14); --c-tint-5-wash: rgba(214, 144, 176, 0.14); --c-tint-6-wash: rgba(195, 181, 126, 0.14); /* Scrims — for text over video, and for modal backdrops. */ --c-scrim: rgba(0, 0, 0, 0.68); --c-scrim-heavy: rgba(0, 0, 0, 0.86); --c-backdrop: rgba(0, 0, 0, 0.55); /* Selection */ --c-selection: rgba(232, 217, 168, 0.22); /* -------------------------------------------------------------------- 2. TYPE iOS system stack first so the app inherits the platform's own face (SF Pro on Apple, Roboto on Android). Sizes follow the iOS text styles rather than a generic modular scale. -------------------------------------------------------------------- */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* iOS text styles */ --t-large-title: 34px; --t-title-1: 28px; --t-title-2: 22px; --t-title-3: 20px; --t-headline: 17px; /* body size, semibold */ --t-body: 17px; /* iOS default reading size */ --t-callout: 16px; --t-subhead: 15px; --t-footnote: 13px; --t-caption: 12px; --t-caption-2: 11px; --lh-tight: 1.15; /* titles */ --lh-snug: 1.3; /* headlines, UI labels */ --lh-body: 1.5; /* running text */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* iOS tightens tracking as type grows. */ --ls-title: -0.03em; --ls-heading: -0.02em; --ls-body: 0; --ls-label: 0.06em; /* uppercase micro-labels only */ /* -------------------------------------------------------------------- 3. SPACING — 4px base -------------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; /* standard iOS edge margin */ --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --gutter: var(--s-4); /* -------------------------------------------------------------------- 4. RADII iOS uses generous, near-continuous curvature. Pills for controls. -------------------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; /* buttons, inputs */ --r-lg: 16px; /* cards */ --r-xl: 20px; /* sheets, media */ --r-2xl: 28px; /* full-bleed media corners */ --r-pill: 999px; /* -------------------------------------------------------------------- 5. ELEVATION — hairlines, not shadows There is intentionally no --shadow-* token. If something needs to read as lifted, it steps up the surface scale and takes a hairline. The only shadow permitted anywhere is the scrim under a modal. -------------------------------------------------------------------- */ --border-hairline: 1px solid var(--c-line); --border-faint: 1px solid var(--c-line-faint); --border-gold: 1px solid var(--c-gold-edge); /* -------------------------------------------------------------------- 6. MOTION Short and spring-like, the way iOS system animation behaves. Functional only — nothing decorative. -------------------------------------------------------------------- */ --dur-instant: 100ms; --dur-fast: 180ms; /* state changes, taps */ --dur-base: 260ms; /* sheets, transitions */ --dur-slow: 380ms; /* full-screen presentation */ --ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* iOS sheet presentation */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1); /* subtle overshoot */ /* -------------------------------------------------------------------- 7. LAYOUT -------------------------------------------------------------------- */ --tap-min: 44px; /* Apple HIG minimum touch target — non-negotiable */ --header-h: 52px; --tabbar-h: 56px; /* Safe areas. Essential to the native feel on notched devices and on Android gesture navigation. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Breakpoints are documented here for reference; media queries can't read custom properties, so these values are repeated literally in base.css. Keep them in sync. phone : < 768px single pane, swipe panel tablet : 768–1023px stacked / tabbed fallback desktop : >= 1024px dual-pane container */ --bp-tablet: 768px; --bp-desktop: 1024px; /* Z layers — one scale, no ad-hoc values anywhere else. */ --z-base: 0; --z-media: 1; --z-overlay: 10; /* in-card detail overlays */ --z-header: 20; --z-tabbar: 20; --z-panel: 30; /* swipe-in utility panel */ --z-backdrop: 40; --z-sheet: 50; --z-toast: 60; } /* ============================================================================ Reduced motion — honour the system setting rather than animating anyway. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }