/* * tokens.css — Module Six design tokens * Single source of truth for all surfaces: Activate, Calibrate, IPP, mobile PWA. * * HOW TO USE * ---------- * Add one line to the of every HTML file, before any other stylesheet: * * * CHANGING THE BRAND * ------------------ * Edit values here only. Every surface updates automatically. * * PRODUCT COLOURS * --------------- * Activate / IPP: --gw-* and --brand-* — primary blue #0077B6 * Calibrate: --cal-* — teal accent * Both products share the same --brand-* and --slate-* scales. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap'); :root { /* ── Typography ──────────────────────────────────────────────────────────── */ --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-display: 'DM Serif Display', Georgia, serif; --font-body: var(--font-sans); /* Calibrate base.css alias */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --line-height-base: 1.65; --line-height-tight: 1.2; /* ── Border radius ───────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 9999px; /* Aliases */ --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); /* ── Brand blue — Activate / IPP (#0077B6) ───────────────────────────────── */ --gw-primary: #0077B6; /* canonical brand blue */ --gw-primary-dark: #005f91; /* hover / pressed */ --gw-primary-deep: #003d5e; /* dark surface hover */ --gw-primary-mid: #0091d6; /* lighter interactive */ --gw-primary-light: #e6f4fb; /* tint background */ --gw-primary-border: rgba(0,119,182,.25); /* --brand-* scale — used by Calibrate base.css and activate.css. Both products load tokens.css so these are the single definition. */ --brand-50: #eef4fb; --brand-100: #d5e5f5; --brand-300: #7aaedd; --brand-500: #0077B6; --brand-700: #005f91; --brand-900: #003d5e; --brand-950: #060f1a; /* Semantic aliases */ --color-primary: var(--gw-primary); --color-primary-dark: var(--gw-primary-dark); --color-primary-light: var(--gw-primary-light); --color-primary-border: var(--gw-primary-border); /* Phone PWA aliases */ --blue: var(--gw-primary); --blue-dark: var(--gw-primary-dark); --blue-light: var(--gw-primary-light); /* Legacy ms6 aliases — kept for any older references */ --ms6-navy: #0a1628; --ms6-navy-mid: #112240; --ms6-navy-light: #1a3357; --ms6-blue: var(--gw-primary); --ms6-blue-mid: var(--gw-primary-mid); --ms6-blue-bright: var(--gw-primary-mid); /* ── Calibrate teal ──────────────────────────────────────────────────────── */ --cal-teal: #1d9e75; --cal-teal-light: #5dcaa5; --cal-teal-bg: rgba(29,158,117,.08); --cal-teal-border: rgba(29,158,117,.2); /* Marketing site alias */ --teal: var(--cal-teal); --teal-light: var(--cal-teal-light); /* ── Slate scale — neutral greys (used by both products) ────────────────── */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Legacy neutral aliases */ --white: #ffffff; --off-white: #f8fafc; /* now aligned to --slate-50 */ --grey-100: var(--slate-100); --grey-200: var(--slate-200); --grey-400: var(--slate-400); /* Text */ --text: var(--slate-900); --text-2: var(--slate-600); --text-3: var(--slate-400); /* Semantic text aliases */ --color-text-primary: var(--slate-900); --color-text-secondary: var(--slate-600); --color-text-hint: var(--slate-400); /* ── Status colours ──────────────────────────────────────────────────────── */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; /* Legacy aliases */ --amber: var(--warning); --amber-dark: #d97706; --red: var(--danger); --red-light: rgba(239,68,68,.1); --green: #10b981; --green-bg: #ecfdf5; --warn-bg: #fffbeb; --warn-text: #78350f; /* ── Light mode surfaces ─────────────────────────────────────────────────── */ --color-bg: #ffffff; --color-bg-surface: #ffffff; --color-bg-raised: var(--slate-50); --color-bg-subtle: var(--slate-100); --color-border: var(--slate-200); --color-border-strong: var(--slate-300); /* Phone PWA aliases */ --bg: #ffffff; --bg2: var(--slate-50); --bg3: var(--slate-100); --border: var(--slate-200); --border2: var(--slate-300); /* Dark app base — Activate sidebar/topnav */ --color-bg-base: var(--brand-950); /* ── Shadows ─────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px -1px rgba(0,0,0,.06); --shadow-card: var(--shadow-sm); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 30px rgba(0,0,0,.10); /* ── Transitions ─────────────────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; } /* ── Dark mode ─────────────────────────────────────────────────────────────── * body.dark — Phone PWA * :root.dark — Activate (class added to by display.js) * ─────────────────────────────────────────────────────────────────────────── */ /* Activate dark mode — dark greys, white text */ :root.dark { --color-bg: #1a1a1a; --color-bg-surface: #242424; --color-bg-raised: #2e2e2e; --color-bg-subtle: #383838; --color-border: rgba(255,255,255,0.10); --color-border-strong: rgba(255,255,255,0.20); --color-text-primary: #ffffff; --color-text-secondary: #b0b0b0; --color-text-hint: #707070; --bg: #1a1a1a; --bg2: #242424; --bg3: #2e2e2e; --border: rgba(255,255,255,0.10); --border2: rgba(255,255,255,0.20); --text: #ffffff; --text-2: #b0b0b0; --text-3: #707070; --gw-primary-light: #0c3058; --blue-light: #0c3058; --green-bg: #173404; --green: #97c459; --warn-bg: #412402; --warn-text: #FAC775; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-card: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); } /* Phone PWA dark mode */ body.dark { --color-bg: #1a1917; --color-bg-surface: #1a1917; --color-bg-raised: #232220; --color-bg-subtle: #2c2b28; --color-border: rgba(245,243,238,0.12); --color-border-strong: rgba(245,243,238,0.25); --color-text-primary: #f5f3ee; --color-text-secondary: #a8a49c; --color-text-hint: #6b6963; --bg: #1a1917; --bg2: #232220; --bg3: #2c2b28; --border: rgba(245,243,238,0.15); --border2: rgba(245,243,238,0.28); --gw-primary-light: #0c3058; --blue-light: #0c3058; --green-bg: #173404; --green: #97c459; --warn-bg: #412402; --warn-text: #FAC775; }