/* ============================================================= Parlor Classic — colors_and_type.css Foundation tokens for a wood-and-felt parlor board-game UI. Reusable across any 2-player square-grid game (chess, draughts, reversi, gomoku, etc.). Component CSS MUST reference these tokens — never hardcode hex/px in component files. ============================================================= */ :root { /* ----------------------------------------------------------- Palette — neutrals (paper, ink) ---------------------------------------------------------- */ --parlor-paper: #F6EFE0; /* page background, warm cream */ --parlor-paper-2: #EDE3CC; /* secondary surface, panel bg */ --parlor-paper-3: #E2D5B8; /* sunken / striped row */ --parlor-paper-edge: #C9B98F; /* hairline divider on cream */ --parlor-ink: #1F1A14; /* primary text, near-black */ --parlor-ink-2: #3A322A; /* secondary text */ --parlor-ink-3: #6A5E4F; /* muted / metadata */ --parlor-ink-4: #9A8B73; /* placeholder, disabled */ /* ----------------------------------------------------------- Palette — wood (board, frame, deep accents) ---------------------------------------------------------- */ --wood-50: #F2E4C6; /* sycamore, lightest square */ --wood-100: #E8D2A6; /* maple */ --wood-300: #C99A5E; /* honey oak */ --wood-500: #8E5A2B; /* walnut, dark square */ --wood-700: #5C3A1C; /* dark walnut, frame */ --wood-900: #2E1B0E; /* ebonized, deep border */ /* ----------------------------------------------------------- Palette — brass (accent, affordances, focus rings) ---------------------------------------------------------- */ --brass-100: #ECD9A6; --brass-300: #D4B26A; --brass-500: #B8893E; /* primary brass */ --brass-700: #8A6428; --brass-900: #523C16; /* ----------------------------------------------------------- Palette — felt (status surface, optional inset) ---------------------------------------------------------- */ --felt-300: #4A6B57; --felt-500: #2D4A38; /* card-table green */ --felt-700: #1B2F22; /* ----------------------------------------------------------- Palette — pieces (monochromatic discs/stones) Two-piece-color contrast: near-black vs near-cream. No team colors yet — game-specific themes layer on top. ---------------------------------------------------------- */ --piece-dark: #1A140F; --piece-dark-hi: #44382C; /* radial highlight */ --piece-dark-rim: #0A0705; --piece-light: #F4ECDA; --piece-light-hi: #FFFFFF; --piece-light-rim: #B8A782; /* ----------------------------------------------------------- Semantic — feedback colors ---------------------------------------------------------- */ --semantic-ok: var(--felt-500); --semantic-warn: var(--brass-500); --semantic-danger: #8B3A2E; /* oxblood */ --semantic-info: var(--wood-700); /* ----------------------------------------------------------- Surfaces (composed roles — components reference these) ---------------------------------------------------------- */ --surface-bg: var(--parlor-paper); --surface-card: #FBF6EA; --surface-card-2: var(--parlor-paper-2); --surface-sunken: var(--parlor-paper-3); --surface-frame: var(--wood-700); --surface-overlay: rgba(31, 26, 20, 0.55); --fg-primary: var(--parlor-ink); --fg-secondary: var(--parlor-ink-2); --fg-muted: var(--parlor-ink-3); --fg-disabled: var(--parlor-ink-4); --fg-on-dark: var(--parlor-paper); --border-hairline: var(--parlor-paper-edge); --border-strong: var(--wood-700); --border-focus: var(--brass-500); /* ----------------------------------------------------------- Type — family System stack only. Do NOT introduce a webfont. ---------------------------------------------------------- */ --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Consolas", "Menlo", monospace; --font-tabular: var(--font-sans); --font-feature-tabular: "tnum" 1, "lnum" 1; /* ----------------------------------------------------------- Type — scale (in rem; 1rem = 16px) Calm, restrained. No display-size flourishes. ---------------------------------------------------------- */ --fs-xs: 0.75rem; /* 12 — captions, kbd, tags */ --fs-sm: 0.875rem; /* 14 — meta, log entries */ --fs-base: 1rem; /* 16 — body */ --fs-md: 1.125rem; /* 18 — section headings */ --fs-lg: 1.375rem; /* 22 — panel headings */ --fs-xl: 1.75rem; /* 28 — page heading */ --fs-2xl: 2.25rem; /* 36 — splash / title only */ /* line-height / weight / tracking */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.5; --lh-loose: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.01em; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ----------------------------------------------------------- Spacing (4-pt scale, named) ---------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ----------------------------------------------------------- Radii (subtle — parlor wood doesn't favor extreme rounding) ---------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* ----------------------------------------------------------- Borders ---------------------------------------------------------- */ --border-width-hair: 1px; --border-width-frame: 3px; /* board frame, modal frame */ --border-width-heavy: 6px; /* deep wood lip */ /* ----------------------------------------------------------- Shadows (warm, soft — like ambient lamp on wood) ---------------------------------------------------------- */ --shadow-flat: 0 1px 0 rgba(31, 26, 20, 0.06); --shadow-rest: 0 1px 2px rgba(31, 26, 20, 0.08), 0 2px 6px rgba(31, 26, 20, 0.06); --shadow-raised: 0 4px 10px rgba(31, 26, 20, 0.12), 0 1px 2px rgba(31, 26, 20, 0.10); --shadow-floating: 0 12px 28px rgba(31, 26, 20, 0.20), 0 4px 8px rgba(31, 26, 20, 0.10); --shadow-piece: 0 3px 5px rgba(0, 0, 0, 0.35), inset 0 4px 6px rgba(255, 255, 255, 0.10), inset 0 -3px 5px rgba(0, 0, 0, 0.25); --shadow-inset-felt: inset 0 2px 6px rgba(0, 0, 0, 0.35); /* ----------------------------------------------------------- Motion ---------------------------------------------------------- */ --ease-standard: cubic-bezier(.4, .0, .2, 1); --ease-enter: cubic-bezier(.0, .0, .2, 1); --ease-exit: cubic-bezier(.4, .0, 1, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; /* ----------------------------------------------------------- Z-index ---------------------------------------------------------- */ --z-board: 1; --z-overlay: 50; --z-modal: 100; --z-toast: 200; /* ----------------------------------------------------------- Component-scoped tokens (composed from primitives) ---------------------------------------------------------- */ --board-square-light: var(--wood-50); --board-square-dark: var(--wood-500); --board-frame: var(--wood-700); --board-coord-fg: var(--brass-500); --button-bg: var(--surface-card); --button-bg-hover: var(--brass-100); --button-bg-active: var(--brass-300); --button-fg: var(--fg-primary); --button-border: var(--wood-700); --button-primary-bg: var(--wood-700); --button-primary-bg-hover: var(--wood-900); --button-primary-fg: var(--fg-on-dark); --tag-bg: var(--brass-100); --tag-fg: var(--brass-900); --tag-border: var(--brass-300); --kbd-bg: var(--surface-card); --kbd-fg: var(--fg-secondary); --kbd-border: var(--parlor-paper-edge); } /* ============================================================= Base body styles ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--surface-bg); color: var(--fg-primary); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: var(--font-feature-tabular); } /* Semantic type defaults — use directly OR via class hooks below. */ h1, .h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); color: var(--fg-primary); } h2, .h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0 0 var(--space-2); color: var(--fg-primary); } h3, .h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0 0 var(--space-2); color: var(--fg-primary); } h4, .h4 { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0 0 var(--space-1); color: var(--fg-primary); text-transform: uppercase; letter-spacing: var(--tracking-caps); } p, .p { margin: 0 0 var(--space-3); color: var(--fg-primary); } small, .small { font-size: var(--fs-sm); color: var(--fg-muted); } .muted { color: var(--fg-muted); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--fs-sm); } a { color: var(--wood-700); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--wood-900); } ::selection { background: var(--brass-300); color: var(--parlor-ink); } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } hr { border: 0; border-top: var(--border-width-hair) solid var(--border-hairline); margin: var(--space-4) 0; }