/* ============================================================================ SARA, BY LOCALS — DESIGN TOKENS v3 "MEDITERRANEAN NIGHT" ---------------------------------------------------------------------------- A palette nobody in travel or AI owns: · white sunlit walls (canvas) · BOUGAINVILLEA #E03570 — the flower on every white wall from Positano to Mykonos: the universal color of "you've arrived somewhere beautiful" · SOLE gold #F0B03C — the local/place side · NOTTE plum #1C1220 — darks with violet blood, not Claude's warm greys Airbnb is salmon-coral · Booking is blue · Claude is terracotta · we are this. Parallel system: v2 lives in tokens.css (untouched). v3 pages link THIS file plus base.css/components.css (legacy --tang-* aliases below keep them working). FONTS — same premium pairing (validated): add to of every page: ========================================================================== */ :root { /* ========================================================================== 1 · COLOR — RAW PALETTE ======================================================================== */ /* --- White (sunlit Mediterranean walls) ----------------------------------- */ --white: #FFFFFF; /* ★ THE CANVAS — page background & raised surfaces */ --grey-50: #FBFAFB; /* subtle lift / alternate section bands */ --grey-100: #F5F3F6; /* sunken wells: inputs, code, chat backdrop */ --grey-200: #ECE8EE; /* hairlines, borders, dividers */ --grey-300: #DCD6DF; /* strong borders, disabled strokes */ /* --- Ink "Notte" (plum night — violet blood, ours alone) ------------------ */ --ink-900: #1C1220; /* headlines, primary text (≈ 17.9:1 on white) */ --ink-800: #271A2C; /* dark sections, footer/phone backgrounds */ --ink-700: #3D3142; /* body text (≈ 10.6:1) */ --ink-600: #57495D; /* secondary text (≈ 7.0:1) */ --ink-500: #6F6175; /* captions, labels (≈ 5.2:1 — last AA-normal stop) */ --ink-400: #92859A; /* placeholders, large-text-only */ --ink-300: #B9AEC0; /* decorative, icons on dark, disabled */ --ink-200: #DAD2DE; /* hairlines on dark surfaces */ --ink-100: #F0EBF2; /* text on dark surfaces */ /* --- Bougainvillea (THE signature — raspberry-red cut, less pink) --------- */ --sig-700: #9A1738; /* signature as SMALL text on white (≈ 8.6:1 AA) */ --sig-600: #B81F44; /* hover/active fills */ --sig-500: #D42A52; /* ★ THE SIGNATURE — buttons, links, the mark */ --sig-400: #E2607E; /* soft emphasis, charts, dark-mode primary */ --sig-200: #F4BCC9; /* selection, focus washes */ --sig-100: #FBE6EB; /* signature washes (Sara's chat bubble) */ /* --- Sole (golden hour — the local / place / experiences side) ------------ */ --sun-700: #8F6109; /* gold as text on white (≈ 5.4:1 AA) */ --sun-600: #B07F10; /* hover, icons, map pins */ --sun-500: #F0B03C; /* ★ THE SECONDARY — tags, "local" UI, gradients */ --sun-300: #F7CF85; /* soft strokes, illustration */ --sun-100: #FBF0DA; /* gold washes (place cards) */ /* --- Status Green (the always-on presence dot — Sara is awake) ------------ */ --green-700: #117A43; /* "Online now" labels on white (≈ 4.8:1) */ --green-500: #1FBE63; /* ★ THE PRESENCE DOT, success states */ --green-300: #86E2B0; /* pulse rings, charts */ --green-100: #DFF7E9; /* success washes */ /* --- The Sunset gradient (signature → gold). Use sparingly: one hero moment per page. For text, always with -webkit-background-clip. ----- */ --grad-sunset: linear-gradient(118deg, var(--sig-500) 12%, #E85546 48%, var(--sun-500) 96%); --grad-aurora: radial-gradient(52% 58% at 18% 22%, color-mix(in srgb, var(--sig-200) 62%, transparent), transparent 70%), radial-gradient(44% 52% at 84% 14%, color-mix(in srgb, var(--sun-300) 52%, transparent), transparent 72%), radial-gradient(40% 46% at 62% 78%, color-mix(in srgb, var(--ink-200) 50%, transparent), transparent 75%); /* ========================================================================== 2 · COLOR — SEMANTIC ALIASES (components must use these, not raw ramps) ======================================================================== */ --color-bg: var(--white); --color-bg-raised: var(--white); --color-bg-sunken: var(--grey-100); --color-bg-band: var(--grey-50); --color-bg-dark: var(--ink-800); --color-text: var(--ink-900); --color-text-secondary: var(--ink-700); --color-text-muted: var(--ink-500); --color-text-inverse: #FFFFFF; --color-primary: var(--sig-500); --color-primary-strong: var(--sig-600); --color-primary-text: var(--sig-700); --color-primary-wash: var(--sig-100); --color-secondary: var(--sun-500); --color-secondary-text: var(--sun-700); --color-secondary-wash: var(--sun-100); --color-online: var(--green-500); --color-online-text: var(--green-700); --color-online-wash: var(--green-100); --color-border: var(--grey-200); --color-border-strong: var(--grey-300); --color-focus-ring: var(--sig-500); /* Chat semantics */ --chat-bubble-guest: var(--white); --chat-bubble-sara: var(--sig-100); --chat-bubble-sara-text: var(--ink-900); /* --- Legacy aliases so base.css / components.css (written for v2) work unchanged with this file. Do not use in new v3 code. ---------------- */ --tang-700: var(--sig-700); --tang-600: var(--sig-600); --tang-500: var(--sig-500); --tang-400: var(--sig-400); --tang-200: var(--sig-200); --tang-100: var(--sig-100); --sage-700: var(--sun-700); --sage-600: var(--sun-600); --sage-500: var(--sun-500); --sage-300: var(--sun-300); --sage-100: var(--sun-100); /* ========================================================================== 3 · TYPOGRAPHY — Fraunces (display) + Satoshi (UI/body) ======================================================================== */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 1.953rem); --text-4xl: clamp(2rem, 1.5rem + 2.4vw, 2.441rem); --text-5xl: clamp(2.4rem, 1.7rem + 3.4vw, 3.052rem); --text-6xl: clamp(2.8rem, 1.9rem + 4.6vw, 3.815rem); --text-7xl: clamp(3.2rem, 2rem + 6vw, 4.768rem); --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-display: 560; --leading-tight: 1.08; --leading-snug: 1.25; --leading-base: 1.55; --leading-loose: 1.75; --tracking-display: -0.022em; --tracking-tight: -0.01em; --tracking-base: 0; --tracking-caps: 0.08em; /* ========================================================================== 4 · SPACE · RADIUS · ELEVATION · MOTION · LAYOUT ======================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-2xl: 2.5rem; --radius-full: 999px; /* Plum-tinted shadows — depth that belongs to the palette */ --shadow-xs: 0 1px 2px rgba(28, 18, 32, 0.05); --shadow-sm: 0 2px 8px rgba(28, 18, 32, 0.06), 0 1px 2px rgba(28, 18, 32, 0.04); --shadow-md: 0 6px 24px rgba(28, 18, 32, 0.08), 0 2px 6px rgba(28, 18, 32, 0.04); --shadow-lg: 0 20px 48px rgba(28, 18, 32, 0.13), 0 4px 12px rgba(28, 18, 32, 0.05); --shadow-glow-primary: 0 8px 28px rgba(212, 42, 82, 0.30); --shadow-glow-coral: var(--shadow-glow-primary); /* legacy alias */ --shadow-glow-green: 0 0 0 5px rgba(31, 190, 99, 0.18); --ease-spring: cubic-bezier(0.34, 1.4, 0.36, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-liquid: 520ms; /* liquid-glass morphs (skill: 400–600ms) */ --container-sm: 40rem; --container-md: 56rem; --container-lg: 72rem; --container-pad: clamp(1.25rem, 4vw, 2.5rem); --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; } /* ============================================================================ DARK THEME — notte plum. Opt-in: ========================================================================== */ [data-theme="dark"] { --color-bg: #191020; --color-bg-raised: #221728; --color-bg-sunken: #120B17; --color-bg-band: #1E1324; --color-bg-dark: #0E0813; --color-text: #F7F4F8; --color-text-secondary: var(--ink-100); --color-text-muted: var(--ink-300); --color-text-inverse: var(--ink-900); --color-primary: var(--sig-400); --color-primary-strong: var(--sig-500); --color-primary-text: #F08FA0; --color-primary-wash: #381521; --color-secondary-text: var(--sun-300); --color-secondary-wash: #2E2412; --color-online-text: #5BD693; --color-online-wash: #11301F; --color-border: #352A3B; --color-border-strong: #483C4F; --chat-bubble-guest: #2A1F30; --chat-bubble-sara: #3A1626; --chat-bubble-sara-text: #F7F4F8; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6); } /* ============================================================================ BASELINE ========================================================================== */ html { font-family: var(--font-sans); font-optical-sizing: auto; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--sig-200); color: var(--ink-900); } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* V4: text/numeral gradient = the vivid v3 "sunset" (founder prefers the v3 look). */ :root { --grad-sunset-text: var(--grad-sunset); }