/* ========================================================================== noname.menu — Core foundations Tokens for color, type, spacing, radius, shadow, motion. Imported by every preview card and UI kit. ========================================================================== */ /* ---------- Webfonts ------------------------------------------------------ */ /* Inter Tight covers EN, FR, ES, DE, IT + Cyrillic (RU) + Greek (EL). */ /* JetBrains Mono for order codes, QR labels, billing numbers. */ /* Self-hosted variable fonts — full weight + italic axes on both families. */ /* woff2 (Brotli-compressed, ~40% the size) is fetched by all modern browsers; the .ttf is kept only as a fallback for very old engines. */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterTight-VariableFont_wght.woff2') format('woff2'), url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'); } @font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/InterTight-Italic-VariableFont_wght.woff2') format('woff2'), url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2'), url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'); } /* JetBrains Mono italic intentionally omitted — no italic file ships, and the UI never uses italic mono. (Previously declared a face pointing at a missing file, which 404'd; synthesised obliques are used if ever needed.) */ /* ========================================================================== COLOR SYSTEM Three surface modes: Default (balanced indoor), Sun (max contrast, warm), Night (deep, amber-tinted, glare-safe). Toggle via `data-mode` on . ========================================================================== */ :root { /* --- Brand / primary ---------------------------------------------------- "Sun amber" — warm, readable in daylight, signals hospitality. */ --amber-50: #fff8eb; --amber-100: #ffecc7; --amber-200: #ffd98a; --amber-300: #ffc04d; --amber-400: #ffa81f; --amber-500: #f08a00; /* PRIMARY */ --amber-600: #c76700; --amber-700: #9a4c00; --amber-800: #6e3600; --amber-900: #3e1d00; /* --- Ink (neutrals) ---------------------------------------------------- Slightly warm-cool greys, tuned so text-on-white hits AAA at 600+. */ --ink-0: #ffffff; --ink-50: #faf8f5; /* app background — off-white, warmer than pure */ --ink-100: #f0ece5; --ink-200: #e2ddd3; --ink-300: #c9c3b6; --ink-400: #9d978a; --ink-500: #6e6a60; --ink-600: #4a473f; --ink-700: #2e2c27; --ink-800: #1b1a17; /* body text default */ --ink-900: #0d0c0a; --ink-1000: #000000; /* --- Semantic accents -------------------------------------------------- */ --ok-500: #1f8a3b; /* paid / live / confirmed */ --ok-100: #d7f0dc; --ok-700: #14632a; --warn-500: #e07b00; /* pending / requires attention */ --warn-100: #ffe8c2; --warn-700: #8a4a00; --danger-500: #d62828; /* failed / declined / refunded */ --danger-100: #fad3d3; --danger-700: #8f1717; --info-500: #1d6aa8; /* live session / informational */ --info-100: #d3e4f3; --info-700: #113f66; /* --- Order state (domain-specific, from CLAUDE.md state ENUM) ---------- */ --state-draft: var(--ink-400); --state-pending: var(--warn-500); --state-paid: var(--ok-500); --state-accepted: var(--info-500); --state-preparing: #6b47d1; --state-ready: var(--amber-500); --state-completed: var(--ink-500); --state-declined: var(--danger-500); --state-refunded: var(--danger-700); /* --- Semantic surface / text (light default) -------------------------- */ --bg: var(--ink-50); --bg-elevated: var(--ink-0); --bg-sunken: var(--ink-100); --bg-inverse: var(--ink-900); --fg: var(--ink-800); --fg-muted: var(--ink-500); --fg-subtle: var(--ink-400); --fg-inverse: var(--ink-0); --fg-on-primary: var(--ink-0); --border: var(--ink-200); --border-strong: var(--ink-300); --border-focus: var(--amber-500); --primary: var(--amber-500); --primary-hover: var(--amber-600); --primary-press: var(--amber-700); --primary-soft: var(--amber-100); } /* ---------- Sun mode: max contrast, reduces glare squint ---------------- */ :root[data-mode="sun"] { --bg: #ffffff; --bg-elevated: #ffffff; --bg-sunken: #f7f3ea; --fg: #000000; --fg-muted: #2e2c27; --border: #2e2c27; /* high-contrast borders */ --border-strong: #000000; --primary: #9a4c00; /* darker amber for daylight readability */ --primary-hover: #6e3600; --fg-on-primary: #ffffff; } /* ---------- Night mode: warm dark, amber-tinted, reduced blue ---------- */ :root[data-mode="night"] { --bg: #15130f; --bg-elevated: #201d18; --bg-sunken: #0d0c0a; --bg-inverse: var(--ink-50); --fg: #f2ede2; --fg-muted: #b4ac99; --fg-subtle: #7e7766; --fg-inverse: var(--ink-900); --border: #38342c; --border-strong: #56503f; --primary: #ffb845; --primary-hover: #ffc970; --fg-on-primary: #1b1a17; --primary-soft: #3e2a00; } /* ========================================================================== TYPOGRAPHY Two families only. Weights: 400, 500, 600, 700, 800. Sizes on a 1.2 modular scale, hand-tuned for readability. Line-height: 1.15 for display, 1.3 titles, 1.5 body. Letter-spacing: tighter on display, loose on CAPS utility. ========================================================================== */ :root { --font-sans: 'Inter Tight', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Size scale */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 64px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; } /* ---------- Semantic type roles ---------------------------------------- */ .t-display { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .t-h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .t-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); } .t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--fg); } .t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg); } .t-lead { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--fg-muted); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg); } .t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg); } .t-label { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--fg); } .t-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-muted); } .t-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); } .t-mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-base); letter-spacing: 0; color: var(--fg); } .t-code { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xl); letter-spacing: 0.04em; color: var(--fg); font-variant-numeric: tabular-nums; } /* ========================================================================== SPACING SCALE — 4px base, 9 steps ========================================================================== */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; } /* ========================================================================== RADIUS ========================================================================== */ :root { --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* default card */ --radius-lg: 16px; --radius-xl: 20px; /* sheet, modal */ --radius-2xl: 28px; --radius-pill: 999px; } /* ========================================================================== SHADOW Soft warm-tinted shadows — avoid cool blue shadows which look synthetic. ========================================================================== */ :root { --shadow-xs: 0 1px 2px rgba(46, 44, 39, 0.06); --shadow-sm: 0 2px 6px rgba(46, 44, 39, 0.08); --shadow-md: 0 6px 18px -4px rgba(46, 44, 39, 0.12), 0 2px 4px rgba(46, 44, 39, 0.06); --shadow-lg: 0 18px 40px -12px rgba(46, 44, 39, 0.22), 0 4px 8px rgba(46, 44, 39, 0.08); --shadow-xl: 0 32px 64px -20px rgba(46, 44, 39, 0.30), 0 8px 16px rgba(46, 44, 39, 0.10); --shadow-focus: 0 0 0 3px var(--amber-200); --shadow-focus-danger: 0 0 0 3px var(--danger-100); --shadow-inset: inset 0 1px 2px rgba(46, 44, 39, 0.08); } /* ========================================================================== MOTION Snappy & functional. No bounces. Durations measured in "units of hurry". ========================================================================== */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1); /* rare; sparingly */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ========================================================================== GLOBAL BASE ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }