/* ============================================================================= Japan Stock Dojo — Design Tokens (Direction A′) · v1.1 Handoff for static HTML/CSS mocks (Claude Code) STRUCTURE - :root → theme-agnostic tokens (type, space, radius) + LIGHT theme color values (the default) - [data-theme="dark"] → dark theme color overrides USAGE - Default page = light. For the brand-default dark UI, put (or toggle the attribute at runtime). - Consume ONLY these variables in component CSS — never hard-code hexes. - Fonts: load Source Serif 4 (display) + Public Sans (UI/numerals). ========================================================================== */ :root { /* ---- typography ---------------------------------------------------- */ --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-body: 'Public Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif; --fs-2xs: 10px; /* chips, table headers, micro-labels */ --fs-xs: 11px; /* meta rows, captions, JA sub-lines */ --fs-sm: 12.5px; /* body small, table cells */ --fs-md: 14px; /* body default */ --fs-lg: 16px; /* card titles (display), stat values */ --fs-xl: 20px; /* sub-heads */ --fs-2xl: 26px; /* page titles, stock name (display) */ --fs-3xl: 34px; /* hero price, big score (display) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --track-label: .08em; /* uppercase section labels */ /* ---- spacing (4px base) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; /* ---- radius -------------------------------------------------------- */ --r-xs: 4px; /* chips, tags */ --r-sm: 6px; /* score pills, inputs, buttons */ --r-md: 10px; /* stats, nested blocks */ --r-lg: 14px; /* cards */ --r-pill: 999px; /* theme toggle */ /* ===== LIGHT theme (default) ======================================= */ color-scheme: light; --bg: #F5F6F8; --surface: #FFFFFF; --surface-2: #EEF0F4; --border: #DBE0E7; --border-strong: #C3CAD4; --text: #1B2330; --muted: #5C6677; --faint: #8A93A3; /* brand — never used for P/L or score semantics */ --accent: #B5304A; /* dojo crimson */ --accent-strong: #9C2940; /* accent hover */ --on-accent: #FFFFFF; --gold: #8A671D; /* compliance, JP-only tags, interpunct */ /* semantics */ --up: #18794E; --down: #C42847; --info: #2F5FC4; /* score aliases — FIXED mapping, never restyled per feature */ --score-strong: var(--up); /* 8.0–10 */ --score-solid: var(--info); /* 6.0–7.9 */ --score-neutral: var(--gold); /* 4.0–5.9 */ --score-weak: var(--down); /* 0–3.9 */ /* soft tints — pills & inline notices */ --up-soft: color-mix(in srgb, var(--up) 13%, transparent); --down-soft: color-mix(in srgb, var(--down) 13%, transparent); --info-soft: color-mix(in srgb, var(--info) 13%, transparent); --gold-soft: color-mix(in srgb, var(--gold) 13%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent); /* categorical — allocation, chart series */ --cat-1: #2F5FC4; --cat-2: #18794E; --cat-3: #8A671D; --cat-4: #B5304A; --cat-5: #6453B8; /* elevation */ --shadow-1: 0 1px 2px rgba(16, 22, 32, .06); --shadow-2: 0 4px 16px rgba(16, 22, 32, .10); --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } /* ===== DARK theme (brand default UI) ================================= */ [data-theme="dark"] { color-scheme: dark; --bg: #0D1219; --surface: #151D2A; --surface-2: #1C2636; --border: #283344; --border-strong: #36465C; --text: #E7ECF3; --muted: #97A2B4; --faint: #6E7A8E; --accent: #D6455D; --accent-strong: #E4607A; --on-accent: #FFFFFF; --gold: #E3B34D; --up: #34C28C; --down: #F65870; --info: #7AA2F2; /* soft tints lift slightly in dark for legibility */ --up-soft: color-mix(in srgb, var(--up) 16%, transparent); --down-soft: color-mix(in srgb, var(--down) 16%, transparent); --info-soft: color-mix(in srgb, var(--info) 16%, transparent); --gold-soft: color-mix(in srgb, var(--gold) 14%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --cat-1: #7AA2F2; --cat-2: #34C28C; --cat-3: #E3B34D; --cat-4: #D6455D; --cat-5: #9D8CFF; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 4px 16px rgba(0, 0, 0, .45); --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } /* score-alias values are theme-agnostic (they reference --up/-info/etc.), so they do NOT need redeclaring inside [data-theme="dark"]. */