/* ============================================================================ datestool — tokens.css Source of truth for all design tokens. Two-tier system: primitive → semantic. Components reference semantic tokens only. Dark via [data-theme="dark"] on . ============================================================================ */ /* --- Webfonts --------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ============================================================================ 1. Primitive tokens — raw palette. Never reference directly in components. ============================================================================ */ :root { /* Greys */ --grey-0: #FFFFFF; --grey-50: #F8F8F7; --grey-100: #F0EFED; --grey-150: #E5E4E0; --grey-200: #D4D3CE; --grey-300: #B0AFA8; --grey-400: #888780; --grey-500: #606059; --grey-600: #464640; --grey-700: #2E2E2A; --grey-800: #1C1C1A; --grey-900: #111110; /* Accent — Blue */ --blue-50: #EEF3FF; --blue-100: #D5E2FF; --blue-200: #ABBEFF; --blue-400: #7599FF; --blue-500: #4F7FFF; --blue-600: #2E5FE8; --blue-700: #1A43C8; --blue-800: #0D2A8A; --blue-900: #061552; /* State primitives */ --red-50: #FEF2F2; --red-500: #EF4444; --red-700: #B91C1C; --green-50: #F0FDF4; --green-500: #22C55E; --green-700: #15803D; } /* ============================================================================ 2. Semantic tokens — light mode (default). ============================================================================ */ :root { /* Backgrounds */ --color-bg-base: var(--grey-50); --color-bg-surface: var(--grey-0); --color-bg-raised: var(--grey-0); --color-bg-subtle: var(--grey-100); --color-bg-input: var(--grey-0); --color-bg-hover: var(--grey-50); /* Text */ --color-text-primary: var(--grey-900); --color-text-secondary: var(--grey-500); --color-text-tertiary: var(--grey-300); --color-text-inverse: var(--grey-0); --color-text-result: var(--grey-900); /* Borders */ --color-border-default: var(--grey-150); --color-border-strong: var(--grey-200); --color-border-subtle: var(--grey-100); /* Accent */ --color-accent: var(--blue-500); --color-accent-hover: var(--blue-600); --color-accent-subtle: var(--blue-50); --color-accent-text: var(--blue-700); /* Semantic states */ --color-error: var(--red-500); --color-error-bg: var(--red-50); --color-error-text: var(--red-700); --color-success: var(--green-500); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md: 0 2px 8px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.04); } /* ============================================================================ 3. Semantic tokens — dark mode. ============================================================================ */ [data-theme="dark"] { --color-bg-base: var(--grey-900); --color-bg-surface: var(--grey-800); --color-bg-raised: var(--grey-700); --color-bg-subtle: var(--grey-800); --color-bg-input: var(--grey-600); --color-bg-hover: var(--grey-700); --color-text-primary: var(--grey-50); --color-text-secondary: var(--grey-400); --color-text-tertiary: var(--grey-600); --color-text-inverse: var(--grey-900); --color-text-result: var(--grey-0); --color-border-default: var(--grey-700); --color-border-strong: var(--grey-600); --color-border-subtle: var(--grey-800); --color-accent: var(--blue-400); --color-accent-hover: var(--blue-500); --color-accent-subtle: var(--blue-900); --color-accent-text: var(--blue-200); --color-error-bg: #2D1515; --color-error-text: #FCA5A5; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3); --shadow-md: 0 2px 8px 0 rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.2); /* Component overrides where semantic cascade isn't enough */ --toggle-bg-off: var(--grey-500); --footer-text: var(--grey-400); --footer-link: var(--grey-400); --footer-link-hover: var(--grey-50); } /* Auto-detect — when no explicit theme is set and user prefers dark */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-base: var(--grey-900); --color-bg-surface: var(--grey-800); --color-bg-raised: var(--grey-700); --color-bg-subtle: var(--grey-800); --color-bg-input: var(--grey-600); --color-bg-hover: var(--grey-700); --color-text-primary: var(--grey-50); --color-text-secondary: var(--grey-400); --color-text-tertiary: var(--grey-600); --color-text-inverse: var(--grey-900); --color-text-result: var(--grey-0); --color-border-default: var(--grey-700); --color-border-strong: var(--grey-600); --color-border-subtle: var(--grey-800); --color-accent: var(--blue-400); --color-accent-hover: var(--blue-500); --color-accent-subtle: var(--blue-900); --color-accent-text: var(--blue-200); --color-error-bg: #2D1515; --color-error-text: #FCA5A5; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3); --shadow-md: 0 2px 8px 0 rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.2); --toggle-bg-off: var(--grey-500); --footer-text: var(--grey-400); --footer-link: var(--grey-400); --footer-link-hover: var(--grey-50); } } /* ============================================================================ 4. Typography tokens. ============================================================================ */ :root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-result-sm: 2.5rem; --text-result: 3.5rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; } /* ============================================================================ 5. Spacing, radius, motion, layout. ============================================================================ */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-normal: 250ms; --layout-max-width: 1100px; --layout-content-width: 680px; --layout-reading-width: 640px; --layout-nav-height: 56px; --layout-page-gutter: var(--space-6); --layout-page-gutter-lg: var(--space-8); } /* ============================================================================ 6. Component tokens — declared once on :root; cascade correctly when [data-theme="dark"] is on because custom properties inherit. ============================================================================ */ :root { /* Navigation */ --nav-height: var(--layout-nav-height); --nav-bg: var(--color-bg-surface); --nav-border: var(--color-border-default); --nav-text: var(--color-text-secondary); --nav-text-hover: var(--color-text-primary); /* Inputs */ --input-height: 44px; --input-bg: var(--color-bg-input); --input-border: var(--color-border-default); --input-border-focus: var(--color-accent); --input-border-error: var(--color-error); --input-text: var(--color-text-primary); --input-placeholder: var(--grey-400); --input-radius: var(--radius-md); --input-padding-x: var(--space-4); --input-focus-ring: 0 0 0 3px var(--color-accent-subtle); /* Primary button */ --btn-primary-bg: var(--color-accent); --btn-primary-bg-hover: var(--color-accent-hover); --btn-primary-text: var(--color-text-inverse); --btn-primary-radius: var(--radius-md); --btn-primary-height: 44px; --btn-primary-padding-x: var(--space-6); /* Ghost button */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--color-bg-hover); --btn-ghost-border: var(--color-border-default); --btn-ghost-border-hover: var(--color-border-strong); --btn-ghost-text: var(--color-text-primary); --btn-ghost-radius: var(--radius-md); --btn-ghost-height: 44px; --btn-ghost-padding-x: var(--space-4); /* Icon button */ --btn-icon-size: 36px; --btn-icon-radius: var(--radius-md); --btn-icon-bg-hover: var(--color-bg-hover); --btn-icon-color: var(--color-text-secondary); /* Toggle */ --toggle-width: 40px; --toggle-height: 22px; --toggle-radius: var(--radius-full); --toggle-bg-off: var(--color-border-strong); --toggle-bg-on: var(--color-accent); --toggle-thumb-size: 16px; --toggle-thumb-bg: var(--grey-0); --toggle-duration: var(--duration-fast); /* Segmented control */ --segment-bg: var(--color-bg-subtle); --segment-border: var(--color-border-default); --segment-radius: var(--radius-md); --segment-item-bg-active: var(--color-bg-surface); --segment-item-text: var(--color-text-secondary); --segment-item-text-active: var(--color-text-primary); --segment-item-radius: var(--radius-sm); --segment-item-shadow-active: var(--shadow-sm); /* Result card */ --result-bg: var(--color-bg-raised); --result-border: var(--color-border-default); --result-radius: var(--radius-xl); --result-shadow: var(--shadow-md); --result-padding: var(--space-8); --result-hero-color: var(--color-text-result); --result-label-color: var(--color-text-secondary); --result-divider: var(--color-border-subtle); /* Calculator card */ --calc-bg: var(--color-bg-surface); --calc-border: var(--color-border-default); --calc-radius: var(--radius-lg); --calc-padding: var(--space-8); /* Footer */ --footer-bg: var(--color-bg-subtle); --footer-border: var(--color-border-default); --footer-text: var(--color-text-secondary); --footer-link: var(--color-text-secondary); --footer-link-hover: var(--color-text-primary); } /* ============================================================================ 7. Semantic typography classes. ============================================================================ */ .t-page-heading { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .t-section-heading { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .t-body { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-primary); } .t-label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-text-primary); } .t-caption { font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-snug); color: var(--color-text-secondary); } /* ============================================================================ 8. Reduced motion. ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }