/* ============================================================ * CMWC Water Accounting — Design Tokens * ------------------------------------------------------------ * Source of truth: this file. * Shared UI design tokens. * Both must change in the same commit. * * Rules: * - Component CSS uses var(--token), never raw values. * - Light theme is opt-in via [data-theme="light"] on . * ============================================================ */ :root { /* ---------- Color: Surfaces (dark, default) ---------- * 5-step scale matching production blueprint.css. The lowest/container * steps are needed for the rail, sidebar, and chart-side surfaces in * Daily Entry and Overview. */ --surface-lowest: #070e1d; --surface: #0c1322; --surface-low: #141b2b; --surface-container: #191f2f; --surface-high: #232a3a; --surface-highest: #2e3545; /* ---------- Color: Text on surface ---------- */ --on-surface: #dce2f7; --on-surface-dim: #c2c6d6; --on-surface-mute: #9da1af; /* ---------- Color: Outlines ---------- * outline = visible card hairline (used in production at #8c909f as * an input/hover border, but for card borders we use the darker step; * keep both available). */ --outline: #2a3247; --outline-variant: #2e3443; --outline-subtle: #222838; /* ---------- Color: Primary action ---------- * Production identity is BLUE (not amber). Primary is the main * accent; primary-strong is used for hover, focus rings, and the * "editing" state. Primary-deep tints auth/login surfaces. */ --primary: #adc6ff; --primary-strong: #4d8eff; --primary-deep: #1e40af; --on-primary: #0c1322; /* ---------- Color: Semantic state ---------- * Each semantic color has four jobs, all flip per theme: * --{color} inline: error text, borders, pill/chip text, icons * --{color}-strong filled-button background * --{color}-deep filled-button hover * --{color}-surface tinted background (banner, pill, panel-tint) * --on-{color} text on the filled button * Inline-only never appears as a fill; fills never appear as inline. */ --success: #4ade80; --success-strong: #22c55e; --success-deep: #15803d; --on-success: #ffffff; --warn: #fbbf24; --warn-strong: #f59e0b; --warn-deep: #b45309; --on-warn: #1c1917; --danger: #f87171; --danger-strong: #ef4444; --danger-deep: #b91c1c; --on-danger: #ffffff; --info: #60a5fa; --info-strong: #3b82f6; --info-deep: #1d4ed8; --on-info: #ffffff; /* ---------- Color: State-tinted surfaces ---------- * Backgrounds for banners, chips, and tinted panels. * Lifted variants — same hue as the inline color, lightness pushed * so it reads as a tinted surface, not a muddy swatch. */ --success-surface: #1b4738; --warn-surface: #4d3a1c; --danger-surface: #5a2727; --info-surface: #28396a; /* ---------- Focus ring ---------- * The single most-used shadow in production. Used on every focusable * input, button, and link via :focus-visible. */ --focus-ring: 0 0 0 2px rgba(77, 142, 255, 0.35); --focus-ring-warn: 0 0 0 2px rgba(245, 158, 11, 0.35); /* ---------- Auth-page glass ---------- * Used by the login/sign-up panel only. Glassmorphism is banned * everywhere else. */ --auth-panel-bg: rgba(20, 27, 43, 0.55); --auth-panel-border: rgba(220, 226, 247, 0.08); --auth-panel-blur: blur(18px) saturate(140%); /* ---------- Spacing scale ---------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* ---------- Typography: family ---------- * System fonts only — no webfonts. Internal operator * tool, no brand identity argument for a custom face, and we don't * pay a network round-trip to load before first paint. */ --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ---------- Typography: scale ---------- */ --font-2xs: 10px; --font-2xs-lh: 13px; --font-2xs-weight: 700; --font-xs: 11px; --font-xs-lh: 14px; --font-xs-weight: 600; --font-sm: 12px; --font-sm-lh: 16px; --font-sm-weight: 400; --font-md: 13px; --font-md-lh: 18px; --font-md-weight: 400; --font-lg: 15px; --font-lg-lh: 20px; --font-lg-weight: 500; --font-xl: 18px; --font-xl-lh: 24px; --font-xl-weight: 600; --font-hero: 24px; --font-hero-lh: 28px; --font-hero-weight: 600; --font-display: 32px; --font-display-lh: 36px; --font-display-weight: 600; --tracking-caps: 0.04em; /* ---------- Radius ---------- */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; /* ---------- Shadow ---------- */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.05); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08); /* ---------- Density (table / form heights) ---------- */ --row-compact: 28px; --row-default: 32px; --header-row: 32px; --field-height: 32px; --button-h: 32px; --panel-header: 40px; --topbar: 56px; /* ---------- Layout ---------- */ --nav-width: 200px; --grid-gap: var(--space-5); --page-pad-x: var(--space-6); --page-pad-top: var(--space-5); --page-pad-bot: var(--space-6); } /* ============================================================ * Light theme — opt in via * Only color tokens flip. Spacing, type, radius, density stay. * ============================================================ */ [data-theme="light"] { color-scheme: light; --surface-lowest: #e8ecf2; --surface: #f5f7fa; --surface-low: #ffffff; --surface-container: #f0f3f8; --surface-high: #e8ecf2; --surface-highest: #dde2eb; --on-surface: #11151f; --on-surface-dim: #3a4256; --on-surface-mute: #6b7283; --outline: #d6dbe5; --outline-variant: #ebeef4; --outline-subtle: #f3f5f9; --primary: #1f4cc4; --primary-strong: #1a3fa3; --primary-deep: #0c2d80; --on-primary: #ffffff; /* Semantic colors stay the same family but flip to darker shades so * text/borders read against pale surfaces. Tinted backgrounds become * pale tints in the same family. */ --success: #15803d; --success-strong: #16a34a; --success-deep: #14532d; --on-success: #ffffff; --warn: #b45309; --warn-strong: #d97706; --warn-deep: #92400e; --on-warn: #ffffff; --danger: #b91c1c; --danger-strong: #dc2626; --danger-deep: #991b1b; --on-danger: #ffffff; --info: #1d4ed8; --info-strong: #2563eb; --info-deep: #1e40af; --on-info: #ffffff; --success-surface: #c8f0d6; --warn-surface: #fde6b8; --danger-surface: #fbcfcf; --info-surface: #cfe0fb; --yellow-bg: #fde6b8; --tertiary: #92400e; --focus-ring: 0 0 0 2px rgba(31, 76, 196, 0.25); --focus-ring-warn: 0 0 0 2px rgba(180, 83, 9, 0.25); --auth-panel-bg: rgba(255, 255, 255, 0.65); --auth-panel-border: rgba(17, 21, 31, 0.08); --auth-panel-blur: blur(18px) saturate(140%); /* Shadows are subtler in light mode; reuse same names. */ --shadow-1: 0 1px 0 rgba(15, 20, 32, 0.04); --shadow-2: 0 4px 12px rgba(15, 20, 32, 0.06); } /* ============================================================ * Base element defaults — applies to every page that loads * tokens.css. Sets the system font stack and tabular numerics * globally; no other styling here. * ============================================================ */ html { font-family: var(--font-family); font-size: var(--font-md); line-height: var(--font-md-lh); color: var(--on-surface); background: var(--surface); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Tells the UA to render native widgets (date/month picker, scrollbars, * autofill) in dark form. Flipped to `light` in the light-theme block. */ color-scheme: dark; } body { margin: 0; background: var(--surface); color: var(--on-surface); } /* Numeric cell helper — used by table.html, kv.html, anywhere * a number is displayed. Always right-aligned, tabular. */ .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Section label helper — small uppercase caption used above * panels and inside form sections. */ .label-caps { font-size: var(--font-xs); line-height: var(--font-xs-lh); font-weight: var(--font-xs-weight); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-surface-mute); }