/* SYNCED 2026-10-24 (Consistency Fleet C4): this vendored copy had drifted * to a pre-Tide rev (stone palette; error red #D64545 at 4.10:1 on its own * surface — the defect canon Rev 5 fixed). Re-synced byte-for-byte to the * canon file below (ideas.29court.com/design-system/tokens.css, Rev 7 value * alignment). Same variable names; no local additions existed. Re-sync on * canon revs, or better: link the canon URL like landing-v2 does. */ /* ============================================================ * 29COURT DESIGN LANGUAGE v2 — TOKENS * The single source of truth for every new 29Court surface. * * What this is, concretely (no hand-waving): * - bencho.dev -> warm bone neutrals, ring-borders not shadows, * wash fills, two-tier type (headline != body) * - Element Plus -> token architecture: global -> component * cascade, runtime CSS vars, color-mix derived * stops, 4 principles (consistency, feedback, * efficiency, controllability). NOT its blue. * - Cloudflare -> hairline-first structure, tabular-nums on * every figure, compact 13px operator type, * judgment in the sub-line never the number * - Linear -> surface ladder + hairlines for depth, * Inter ss03/cv11 glyph distinction, -subtle * badge variants, dark-mode-native thinking * - Stripe -> 3px low-alpha focus halo, 4-8px control * radii, anti-decorative discipline * - Raycast -> keyboard badges as chrome, accent = brand * mark not functional color, opacity-step depth * * TIDE REV 7 VALUE ALIGNMENT (2026-10-19, Family D): token VALUES * re-pointed to canonical Tide (tide.29court.com, Rev 7 2026-10-18): * ink ladder = Tide --ink-1..5, surfaces = Tide sand ramp, semantic * steps = Tide Rev 3/5 values, placeholder step = Rev 7 placeholder * values. Same token names, same structure — values only. * Live: https://ideas.29court.com/design-system/tokens.css * Include: * * * * RULES * 1. Every color, radius, space, shadow, font, motion value * resolves to a --29d-* token. Hardcoded hex/rgb/px outside * this file is a violation. * 2. Dark mode is [data-theme="dark"] on . Never ship a * screen in one mode only. * 3. Density is [data-density="compact"] on a container (or * ). Tools/dashboards/tables = compact. Marketing, * onboarding, empty states = comfortable (default). * 4. If a value you need is missing, the design is probably * wrong. Re-read the skill before inventing a token. * ============================================================ */ :root { /* ---------- COLOR: brand coral (the action color) ---------- */ --29d-coral-50: #FFF4EE; --29d-coral-100: #FFE4D4; --29d-coral-200: #FFC8A6; --29d-coral-300: #FF9E70; --29d-coral-400: #FB7E54; --29d-coral-500: #F46036; /* links on light, focus accents */ --29d-coral-600: #C7471F; /* PRIMARY button bg — pair-gated: white text on this value computes 4.83:1 (was #D94E26 at 4.14:1, under the 4.5 at-rest gate; deepened 2026-10-14, see SKILL.md self-check) */ --29d-coral-700: #B03D1C; /* button hover, text on coral-100 */ --29d-coral-800: #8A3018; --29d-coral-900: #652412; /* ---------- COLOR: text ladder (5 steps, warm) ---------- */ --29d-text-1: #1E2A30; /* primary: headings, body */ --29d-text-2: #46535A; /* secondary */ --29d-text-3: #5C686E; /* tertiary: metadata, captions */ --29d-text-4: #5C686E; /* placeholder — Rev 7: placeholder takes the ink-3 step (5.64:1 on raised); the old #A8A29E sat at 2.52:1 */ --29d-text-5: #CFD1CC; /* disabled, faintest */ /* ---------- COLOR: surfaces (warm bone, bencho lane) ---------- */ --29d-bg: #F5EFE3; /* page */ --29d-surface: #FBF7EF; /* cards, panels */ --29d-raised: #FFFDF8; /* popovers, dropdowns */ --29d-overlay: #FFFDF8; /* modals */ --29d-sunken: #ECE3D2; /* wells, code blocks, inset areas */ --29d-wash: color-mix(in srgb, var(--29d-text-1) 6%, transparent); /* hover wash */ --29d-wash-2: color-mix(in srgb, var(--29d-text-1) 10%, transparent); /* active wash */ /* ---------- COLOR: borders (ONE default, hairline-first) ---------- */ --29d-border: #E2D6C0; /* the only border color at rest */ --29d-border-strong: #CDBEA3; /* emphasis, input borders */ --29d-ring: color-mix(in srgb, var(--29d-text-1) 14%, transparent); /* ring-borders on tints */ /* ---------- COLOR: info blue (links + info ONLY, never primary) ---------- */ --29d-blue-100: #E2F0FE; --29d-blue-600: #2E7FDB; /* links, info text */ --29d-blue-700: #1F63B4; /* ---------- COLOR: semantic (meaning only, never decoration) ---------- */ --29d-green-100: #DFF3E5; --29d-green-600: #267A43; --29d-green-700: #20693A; --29d-amber-100: #FBEFD8; --29d-amber-600: #B07414; --29d-amber-700: #8F5D10; --29d-red-100: #FBE6E3; --29d-red-500: #F56C6C; --29d-red-600: #BC4038; --29d-red-700: #A93232; --29d-teal-600: #2A7C71; --29d-teal-100: #DAEFE9; --29d-gold-500: #E9A13B; --29d-gold-600: #C77F1A; /* stars, premium markers, sparingly */ /* ---------- COLOR: on-color text (contrast-paired) ---------- */ --29d-on-coral: #FFFFFF; --29d-on-dark: #FFFFFF; /* ---------- TYPE ---------- */ --29d-font-ui: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --29d-font-display: "Nunito", ui-rounded, -apple-system, "SF Pro Rounded", "Segoe UI", sans-serif; --29d-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Linear steal: alternate glyphs = distinction without a custom font */ --29d-font-features: "ss03", "cv11", "tnum" 0; --29d-text-2xs: 11px; --29d-lh-2xs: 16px; --29d-text-xs: 12px; --29d-lh-xs: 16px; --29d-text-sm: 13px; --29d-lh-sm: 20px; --29d-text-md: 15px; --29d-lh-md: 24px; --29d-text-lg: 17px; --29d-lh-lg: 26px; --29d-text-xl: 20px; --29d-lh-xl: 28px; --29d-text-2xl: 24px; --29d-lh-2xl: 32px; --29d-text-3xl: 32px; --29d-lh-3xl: 40px; --29d-text-4xl: 40px; --29d-lh-4xl: 48px; --29d-weight-regular: 400; --29d-weight-medium: 500; --29d-weight-semibold: 600; --29d-weight-bold: 700; --29d-weight-xbold: 800; /* ---------- RADIUS (dual-radius rule) ---------- App controls: 4-6px. Cards/panels: 8px. Large: 12px max. Pills: marketing CTAs, toggles, avatars ONLY. Never 16px+ blobs. */ --29d-r-1: 4px; /* kbd badges, tiny chips, focus inner */ --29d-r-2: 6px; /* buttons, inputs, dropdowns: THE operator default */ --29d-r-3: 8px; /* cards, panels, table containers */ --29d-r-4: 12px; /* modals, large panels, showcase cards: the max */ --29d-pill: 999px; /* marketing CTAs, toggles, avatars, segmented */ /* ---------- SPACE (4pt base; 2px for micro-gaps only) ---------- */ --29d-s-0: 2px; --29d-s-1: 4px; --29d-s-2: 8px; --29d-s-3: 12px; --29d-s-4: 16px; --29d-s-6: 24px; --29d-s-8: 32px; --29d-s-12: 48px; --29d-s-16: 64px; /* ---------- ELEVATION (borders do the work; shadows are rare) ---------- Panels/cards: 1px var(--29d-border), NO shadow. Shadows exist for floating UI only. */ --29d-shadow-pop: 0 0 0 1px var(--29d-ring), 0 8px 24px rgba(28, 25, 23, 0.10), 0 2px 6px rgba(28, 25, 23, 0.06); --29d-shadow-modal: 0 0 0 1px var(--29d-ring), 0 24px 64px rgba(28, 25, 23, 0.18); /* ---------- MOTION (Cloudflare-fast: 120-220ms for repeated actions) ---------- */ --29d-t-instant: 80ms; /* toggles, checkboxes, press */ --29d-t-fast: 120ms; /* hovers, exits */ --29d-t-base: 160ms; /* default transitions */ --29d-t-slow: 240ms; /* entrances, modals */ --29d-t-page: 320ms; /* page transitions, large reveals */ --29d-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* everything eases out */ --29d-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* success moments ONLY */ /* ---------- FOCUS (Stripe's 3px halo, coral) ---------- */ --29d-focus-halo: 0 0 0 3px color-mix(in srgb, var(--29d-coral-500) 32%, transparent); --29d-focus-ring: 0 0 0 1px var(--29d-coral-500); /* ---------- DENSITY: comfortable (default) ---------- */ --29d-body-size: var(--29d-text-md); --29d-body-lh: var(--29d-lh-md); --29d-control-h: 40px; /* input / button height */ --29d-control-h-sm: 32px; --29d-row-h: 48px; /* table row */ --29d-card-pad: var(--29d-s-6); --29d-section-gap: var(--29d-s-8); --29d-page-pad: var(--29d-s-6); } /* ---------- DENSITY: compact (tools, dashboards, data tables) ---------- */ [data-density="compact"] { --29d-body-size: var(--29d-text-sm); --29d-body-lh: var(--29d-lh-sm); --29d-control-h: 32px; --29d-control-h-sm: 28px; --29d-row-h: 36px; --29d-card-pad: var(--29d-s-4); --29d-section-gap: var(--29d-s-6); --29d-page-pad: var(--29d-s-4); } /* ---------- THEME: dark — MELEE NIGHT (crafted 2026-10-13) ---------- * Not an inversion: a place. Deep teal-and-indigo ocean night, * silver moonlight for ink and hairlines, warm lantern amber for * every accent that glows. Quality bar: Melee Island at night. * Grounds are harbor water, never black; ink is moonlit * silver-cream, never stark white. (Victor's order, 2026-10-13: * the old warm-brown dark read as inverted sepia; it is gone.) */ [data-theme="dark"] { --29d-coral-500: #FFA25E; /* lantern glow: links, focus accents */ --29d-coral-600: #FB8B4C; /* PRIMARY button bg on dark (lantern amber) */ --29d-coral-700: #FFB37C; --29d-coral-100: #33231A; /* lantern-lit tinted surfaces */ --29d-coral-50: #241A13; --29d-text-1: #EDE7DA; /* moonlit silver-cream */ --29d-text-2: #B9C2C4; /* moonlit mist */ --29d-text-3: #87969E; /* sea mist */ --29d-text-4: #9AABB3; /* Rev 7 dark placeholder pin: 6.01:1 on dark raised */ --29d-text-5: #33475A; --29d-bg: #0C1824; /* deep harbor water */ --29d-surface: #132233; /* moonlit surface */ --29d-raised: #1A2C3D; --29d-overlay: #1A2C3D; --29d-sunken: #08121C; /* the depths */ --29d-wash: rgba(190, 220, 232, 0.05); /* moonlight wash */ --29d-wash-2: rgba(190, 220, 232, 0.09); --29d-border: rgba(196, 214, 224, 0.12); /* moonlight hairline */ --29d-border-strong: rgba(196, 214, 224, 0.22); --29d-ring: rgba(176, 213, 224, 0.15); --29d-blue-100: #102A3E; --29d-blue-600: #8FC7EE; --29d-blue-700: #B9DCF7; --29d-green-100: #0F2A20; --29d-green-600: #62CF95; --29d-green-700: #85DDA9; --29d-amber-100: #2E2310; --29d-amber-600: #F2B04C; --29d-amber-700: #F7C87C; --29d-red-100: #341C1D; --29d-red-500: #F2837E; --29d-red-600: #F2837E; --29d-red-700: #FAABA3; --29d-teal-100: #123A37; --29d-teal-600: #62C9B7; /* sea-glass in moonlight */ --29d-gold-500: #F5C15C; --29d-gold-600: #F5C15C; /* lantern gold */ --29d-on-coral: #2A1503; /* deep warm brown on lantern buttons */ --29d-shadow-pop: 0 0 0 1px var(--29d-ring), 0 12px 32px rgba(2, 10, 14, 0.50), 0 2px 8px rgba(2, 10, 14, 0.38); --29d-shadow-modal: 0 0 0 1px var(--29d-ring), 0 32px 80px rgba(2, 10, 14, 0.60); --29d-focus-halo: 0 0 0 3px color-mix(in srgb, var(--29d-coral-500) 38%, transparent); }