/* ============================================================================ TINORA — FROZEN DESIGN TOKENS v2.0 · The Studio / Jade Palmer · 2026-07-20 Single source of truth for Paige Lane and every tinora.app surface. Governs under BRAND-DNA.md v2.0 (§3.2 color · §3.3 type · §3.6 motion) and TYPE-RULING v1.0 (§4 role map). SUPERSEDES: assets/palette.md v1.0 and assets/v2-direction/palette-provisional.md (both marked superseded). Every colour figure is computed (WCAG 2.x relative luminance; CIELAB D65; Viénot–Brettel–Mollon 1999 dichromacy), reproduced by palette-precheck.py. See TOKENS.md for the full contrast + CVD tables and the usage laws. Canonical domain: tinora.do (tinora.app = PWA/app surface only). ============================================================================ */ :root { /* ---- 1 · RAW PALETTE (brand vocabulary — 17 named colours) --------------- Each carries its AA partner + a one-line CVD/role note. Full tables: TOKENS.md Restraint law (§3.2-3): triad + Caribe + neutrals — nothing else. No #F00-family. No gradients as identity. Verdict colour NEVER carries alone (form + ES label co-present). */ --blanco-dia: #FBFCFD; /* ground · clean cool daylight. Tinta on it 15.22:1 */ --ficha: #FFFFFF; /* card/sheet surface. Tinta on it 15.63:1 */ --tinta: #1B2431; /* ink + still-layer ground. AA on any light ground */ --tinta-media: #49535F; /* secondary text/metadata/method. 7.61:1 on blanco-dia */ --trazo: #E2E6EA; /* hairline/divider ONLY — never text, never broadsheet rules */ --caribe: #0E6B75; /* BRAND HUE · actions/links/focus/chrome/wordmark. White on it 6.22:1. NEVER a chip, NEVER a verdict */ --caribe-prof: #0A525A; /* Caribe pressed/hover · icon flap on Caribe field. White on it 8.87:1 */ --caribe-tinte: #E3F1F2; /* light Caribe field (living-layer). Tinta on it 13.50:1 */ --verde: #0E6B44; /* PRESENTA · corrected off DNA anchor #128A52 (AA-failed). White on it 6.55:1 */ --miel: #9A6B00; /* CON CONDICIONES · corrected off #A87500. White on it 4.69:1 (rides AA floor by design) */ --grafito: #323B46; /* DESCARTA · cool slate, zero failure-red. White on it 11.35:1 */ --verde-tinte: #E1F1E8; /* PRESENTA tint field · label = Tinta (Law A) 13.36:1 */ --miel-tinte: #FBF1D8; /* CON CONDICIONES tint field · label = Tinta (Law A) 13.90:1 */ --grafito-tinte:#E7EAEE; /* DESCARTA tint field · label = Tinta (Law A) 12.95:1 */ --pliegue: #262E38; /* filed-corner flap on grafito marks · decorative, no floor */ --reversa-sec: #B9C1CC; /* secondary text on Tinta panels 8.61:1 · flap on light-form chips */ --sombra-metodo:#F3F6F8; /* the shade · cool quiet field for the method zone. Carries no text itself */ /* ---- 2 · SEMANTIC ROLES (map raw → intent; Paige consumes these) --------- */ --surface-ground: var(--blanco-dia); --surface-card: var(--ficha); --surface-still: var(--tinta); /* the verdict's still layer — reversed panels, sparing */ --surface-metodo: var(--sombra-metodo); --surface-accent-soft: var(--caribe-tinte); --ink: var(--tinta); --ink-secondary: var(--tinta-media); --ink-on-still: var(--ficha); /* text on Tinta panels; secondary = --reversa-sec */ --ink-on-action: var(--ficha); /* label on a Caribe/verdict solid */ --action: var(--caribe); --action-pressed: var(--caribe-prof); --link: var(--caribe); --focus: var(--caribe); --border-hairline:var(--trazo); --verdict-presenta: var(--verde); /* form = solid chip */ --verdict-condiciones: var(--miel); /* form = outlined chip + count */ --verdict-descarta: var(--grafito); /* form = filed chip, folded corner */ --verdict-presenta-field: var(--verde-tinte); --verdict-condiciones-field: var(--miel-tinte); --verdict-descarta-field: var(--grafito-tinte); /* "En revisión" (HOLD's only face) = --ink-secondary text · --trazo border · --ficha field. NEVER a chip. */ /* ---- 3 · TYPOGRAPHY (Concourse-led · TYPE-RULING §4) --------------------- Live web: @font-face maps Concourse weights on the assigned tinora.app slot (lean woff2 ≤5 files) with the system fallback below — every layout must hold on the fallback (§3.3). Baked assets name installed Concourse directly. Weight 2 (Thin/Light) is BANNED on customer surfaces. No serif. No mono. */ --font-sans: 'Concourse', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Concourse Black', 'Concourse', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-caps: 'Concourse Caps', 'Concourse', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-tab: 'Concourse Tab', 'Concourse', ui-monospace, SFMono-Regular, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fw-book: 400; /* Concourse 3 · UI body */ --fw-medium: 500; /* Concourse 4 · UI body / labels */ --fw-semibold: 600; /* Concourse 6 · actions, emphasis */ --fw-bold: 700; /* Concourse 7 · chip labels, frame line, headings */ --fw-black: 900; /* Concourse 8 · display / hero — the energy carrier */ /* modular scale · phone-first · 16px body floor (never below for body copy) */ --fs-100: 12px; /* caption / metadata — --ink-secondary only */ --fs-200: 13px; /* small label */ --fs-300: 14px; /* UI secondary */ --fs-400: 16px; /* BODY FLOOR */ --fs-500: 18px; /* lead */ --fs-600: 21px; /* subhead */ --fs-700: 27px; /* title */ --fs-800: 34px; /* display */ --fs-900: 56px; /* hero number (el retrato) */ --lh-tight: 1.12; /* display */ --lh-snug: 1.3; --lh-body: 1.55; --ls-display: -0.02em; --ls-body: 0; --ls-caps: 0.02em; /* Caps chip/short labels — Butterick built-in letterspacing; NOT wide masthead tracking */ /* Wordmark two-weight boundary (FREEZE-RECORD §7 · 2026-07-21). Governs the LOGO cuts, not UI text. Two frozen masters: 7 Bold = workhorse/DEFAULT → wordmark.svg / wordmark-mono.svg (UI, nav, footer, reverse, small sizes, ALL isotipo-adjacent lockups; floor 18px/5mm) 8 Black = display/HERO ONLY → wordmark-hero.svg / wordmark-hero-mono.svg (standalone large-format only; NOT beside the 7-weight isotipo-T) Below --wordmark-hero-floor the hero cut is banned — fall back to 7 Bold. Never mix weights in one rendering. Hero inherits the wordmark colour law (no new palette). */ --wordmark-hero-floor: 48px; /* min rendered box-height for 8 Black hero (web) · 13mm print */ /* ---- 4 · SPACE (4px base) ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --tap-min: 44px; /* WCAG 2.2 touch target floor (§3.7) */ /* ---- 5 · RADII --------------------------------------------------------- */ --r-chip: 6px; --r-field: 10px; /* buttons, method field, tint fields */ --r-card: 14px; --r-pill: 999px; --r-icon-squircle: 22.37%; /* iOS mask approximation — OS applies the real squircle */ /* ---- 6 · ELEVATION (screen-native · §3.4 — no hairline-rule boxes) ------ */ --elev-0: none; --elev-card: 0 6px 28px -12px rgba(27,36,49,.16), 0 1px 0 rgba(27,36,49,.03); --elev-sheet: 0 12px 40px -16px rgba(27,36,49,.20); /* the STILL verdict zone signals with stillness, not elevation — keep it flat on the card. */ /* ---- 7 · FOCUS --------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(14,107,117,.45); /* Caribe · AA non-text 3:1+ */ --focus-width: 2px; /* ---- 8 · MOTION (two-layer contrast law · §1.6 / §3.6) ----------------- LIVING layer (nav, triage travel, queue, onboarding, marketing): springy- but-decisive, tactile, allowed to delight. STILL layer (verdict reveal/commit): ≤250ms, decisive, then stillness — verdicts are NEVER celebrated (no confetti/spinner/fanfare). No slot-machine physics anywhere (§6.13). */ --motion-living-fast: 180ms; --motion-living: 240ms; --motion-living-slow: 320ms; --motion-triage: 280ms; /* swipe-card travel/settle */ --motion-still: 220ms; /* verdict reveal/commit — ≤250ms then quiet */ --ease-living: cubic-bezier(0.2, 0.8, 0.2, 1); /* confident, physical */ --ease-still: cubic-bezier(0.4, 0.0, 0.2, 1); /* decisive, no bounce */ --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); } /* prefers-reduced-motion: every gesture outcome has a non-animated equivalent (§3.6/§3.7) */ @media (prefers-reduced-motion: reduce) { :root { --motion-living-fast: 0ms; --motion-living: 0ms; --motion-living-slow: 0ms; --motion-triage: 0ms; --motion-still: 0ms; } }