/* ========================================================================== GSM Calculator — Design Tokens File: /assets/css/tokens.css Owner: Sub-agent B (this is the canonical token source; do not redefine these values elsewhere — only consume them via var()). Zero-build: plain CSS custom properties. No preprocessor. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROOT / LIGHT THEME (default) Theme is switched by setting `data-theme="dark"` on . `:root` holds light values; `[data-theme="dark"]` overrides. `color-scheme` is set so native form controls/scrollbars follow the theme. -------------------------------------------------------------------------- */ :root { color-scheme: light; /* ---- Brand / accent ---------------------------------------------------- */ --color-brand: #4f46e5; /* indigo 600 — primary action */ --color-brand-hover: #4338ca; /* indigo 700 */ --color-brand-active: #3730a3; /* indigo 800 */ --color-brand-soft: #eef2ff; /* indigo 50 — tinted backgrounds */ --color-brand-contrast: #ffffff; /* text/icon on brand fills */ --color-accent: #06b6d4; /* cyan 500 — secondary highlight */ --color-accent-soft: #ecfeff; /* cyan 50 */ /* ---- Surfaces (lowest → highest elevation) ----------------------------- */ --color-bg: #f8fafc; /* page background (slate 50) */ --color-surface: #ffffff; /* cards, panels */ --color-surface-2: #f1f5f9; /* inset / subtle fills (slate 100) */ --color-surface-3: #e2e8f0; /* hover fills (slate 200) */ --color-overlay: rgba(15, 23, 42, 0.45); /* modal/scrim */ /* ---- Text -------------------------------------------------------------- */ --color-text: #0f172a; /* primary (slate 900) */ --color-text-secondary: #475569; /* secondary(slate 600) */ --color-text-muted: #94a3b8; /* muted/placeholder (slate 400) */ --color-text-on-brand: #ffffff; /* ---- Borders / dividers ------------------------------------------------ */ --color-border: #e2e8f0; /* default divider (slate 200) */ --color-border-strong: #cbd5e1; /* input borders (slate 300) */ --color-focus-ring: #818cf8; /* indigo 400 — focus outline */ /* ---- Semantic / status ------------------------------------------------- */ --color-success: #16a34a; --color-success-soft: #dcfce7; --color-warning: #d97706; --color-warning-soft: #fef3c7; --color-danger: #dc2626; --color-danger-soft: #fee2e2; --color-info: #2563eb; --color-info-soft: #dbeafe; /* ---- Functional highlights (segment calculator) ------------------------ * * --hl-ucs2 : background tint for chars that FORCE UCS-2 encoding. * --hl-ext : background tint for GSM-7 extension chars (cost 2 units). * Text colors are darkened variants for AA contrast on the tint. */ --hl-ucs2-bg: #fde68a; /* amber 200 */ --hl-ucs2-text: #78350f; /* amber 900 */ --hl-ext-bg: #bae6fd; /* sky 200 */ --hl-ext-text: #075985; /* sky 800 */ /* ---- Data-viz / breakdown bars ----------------------------------------- */ --viz-1: #4f46e5; /* sms */ --viz-2: #06b6d4; /* whatsapp */ --viz-3: #f59e0b; /* email */ --viz-4: #ec4899; /* voice */ /* ----------------------------------------------------------------------- * * 2. TYPOGRAPHY * Primary UI font: Inter (Google Fonts) with a full system fallback so the * site is fully usable before/without the webfont. Numeric/monospace font * used for counters, rates, and code-like segment readouts. * ----------------------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale (1.250 major-third-ish, fluid via clamp on display sizes) */ --fs-xs: 0.75rem; /* 12px — captions, badges */ --fs-sm: 0.875rem; /* 14px — secondary text, labels */ --fs-base: 1rem; /* 16px — body */ --fs-md: 1.125rem; /* 18px — lead paragraph */ --fs-lg: 1.25rem; /* 20px — card titles */ --fs-xl: 1.5rem; /* 24px — section headings */ --fs-2xl: 1.875rem; /* 30px — page H1 (mobile) */ --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* hero/display */ --fs-stat: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); /* big stat numbers */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.04em; /* ----------------------------------------------------------------------- * * 3. SPACING SCALE (4px base) * ----------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ /* ----------------------------------------------------------------------- * * 4. RADII * ----------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ----------------------------------------------------------------------- * * 5. SHADOWS (tuned for light bg) * ----------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* ----------------------------------------------------------------------- * * 6. LAYOUT / MOTION * ----------------------------------------------------------------------- */ --container-max: 1120px; --container-narrow: 760px; /* article/explainer width */ --header-h: 64px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --z-header: 100; --z-dropdown: 200; --z-modal: 1000; --z-toast: 1100; } /* -------------------------------------------------------------------------- DARK THEME OVERRIDES -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --color-brand: #818cf8; /* indigo 400 — lifts on dark */ --color-brand-hover: #a5b4fc; /* indigo 300 */ --color-brand-active: #6366f1; /* indigo 500 */ --color-brand-soft: #1e1b4b; /* indigo 950 */ --color-brand-contrast: #0b1020; --color-accent: #22d3ee; --color-accent-soft: #083344; --color-bg: #0b1020; /* near-slate-950, slightly violet */ --color-surface: #131a2b; /* card */ --color-surface-2: #1c2436; /* inset */ --color-surface-3: #283044; /* hover */ --color-overlay: rgba(2, 6, 23, 0.6); --color-text: #e9eef7; --color-text-secondary: #aeb9cc; --color-text-muted: #67748c; --color-text-on-brand: #0b1020; --color-border: #28324a; --color-border-strong: #3a4666; --color-focus-ring: #6366f1; --color-success: #4ade80; --color-success-soft: #052e16; --color-warning: #fbbf24; --color-warning-soft: #422006; --color-danger: #f87171; --color-danger-soft: #450a0a; --color-info: #60a5fa; --color-info-soft: #0c2a5e; --hl-ucs2-bg: #78350f; --hl-ucs2-text: #fde68a; --hl-ext-bg: #075985; --hl-ext-text: #bae6fd; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4); } /* -------------------------------------------------------------------------- AUTO DARK MODE — applied only when the user has NOT set an explicit theme. Sub-agent B: on load, if localStorage has no `gsmcalc:theme`, leave data-theme unset so this media query governs; once the toggle is used, write data-theme explicitly which wins over this block. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-brand: #818cf8; --color-brand-hover: #a5b4fc; --color-brand-active: #6366f1; --color-brand-soft: #1e1b4b; --color-brand-contrast: #0b1020; --color-accent: #22d3ee; --color-accent-soft: #083344; --color-bg: #0b1020; --color-surface: #131a2b; --color-surface-2: #1c2436; --color-surface-3: #283044; --color-overlay: rgba(2,6,23,0.6); --color-text: #e9eef7; --color-text-secondary: #aeb9cc; --color-text-muted: #67748c; --color-text-on-brand: #0b1020; --color-border: #28324a; --color-border-strong: #3a4666; --color-focus-ring: #6366f1; --color-success:#4ade80; --color-success-soft:#052e16; --color-warning:#fbbf24; --color-warning-soft:#422006; --color-danger:#f87171; --color-danger-soft:#450a0a; --color-info:#60a5fa; --color-info-soft:#0c2a5e; --hl-ucs2-bg:#78350f; --hl-ucs2-text:#fde68a; --hl-ext-bg:#075985; --hl-ext-text:#bae6fd; --shadow-xs:0 1px 2px rgba(0,0,0,0.4); --shadow-sm:0 1px 3px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 4px 12px rgba(0,0,0,0.5),0 2px 4px rgba(0,0,0,0.3); --shadow-lg:0 14px 32px rgba(0,0,0,0.6),0 4px 10px rgba(0,0,0,0.4); } } /* -------------------------------------------------------------------------- Reduced-motion: kill non-essential transitions. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }