/* ============================================================================
TEGA TOOLS — DESIGN TOKENS (single source of truth)
TheElectricalGuy Academy tool ecosystem.
RULE: Every tool imports this file. Never hardcode a colour, font, radius,
or spacing value in a tool — always reference a token below. Change a value
here once and the whole ecosystem updates.
Grounded in the TEGA Brand Guidelines. Values marked (DERIVED) are supporting
shades/states not in the brand guide, chosen to harmonise with navy + gold.
========================================================================== */
/* --- Fonts -----------------------------------------------------------------
Add ONCE in your Jinja base.html (all three are on Google Fonts):
--------------------------------------------------------------------------- */
:root {
/* === RAW BRAND PALETTE (from brand guide — do not rename) ================ */
--navy: #0A1F44; /* Primary — anchor, authority, premium */
--gold: #C59D5F; /* Accent — highlights & CTAs, use sparingly */
--black: #000000; /* Text / strong contrast */
--white: #FFFFFF; /* Base / breathing space */
/* === DERIVED NAVY SCALE (tints & shades of --navy) ============ (DERIVED) */
--navy-900: #06132B; /* deepest — hero backgrounds */
--navy-800: #0A1F44; /* = --navy */
--navy-700: #14305F;
--navy-600: #1F4176;
--navy-500: #2E548E;
--navy-100: #DDE4EF; /* faint navy wash for panels */
--navy-050: #F2F5FA; /* near-white navy tint — alt surface */
/* === DERIVED GOLD SCALE ======================================= (DERIVED) */
--gold-700: #A47F42; /* pressed / active */
--gold-600: #B48D4F; /* hover */
--gold-500: #C59D5F; /* = --gold */
--gold-200: #EBDCC2; /* soft gold fill / underline wash */
--gold-050: #FAF5EC; /* faintest gold background */
/* === DERIVED NEUTRALS (warm-cool grey, premium) ============== (DERIVED) */
--grey-900: #1A1F29; /* near-black body text (softer than #000) */
--grey-700: #3D4655;
--grey-500: #6B7280; /* secondary text */
--grey-400: #9AA3B2; /* muted / placeholder */
--grey-300: #CBD2DD; /* borders */
--grey-200: #E4E8EF; /* subtle dividers */
--grey-100: #F4F6FA; /* app background */
/* === FUNCTIONAL / STATE (calculator feedback) =============== (DERIVED) */
/* Muted so they never fight the premium palette. */
--success: #2F7D5B; --success-bg: #E7F2EC; /* pass / within limit */
--warning: #B8862B; --warning-bg: #FBF3E2; /* borderline / caution */
--danger: #B23B3B; --danger-bg: #F8E9E9; /* fail / exceeds limit */
--info: var(--navy-600); --info-bg: var(--navy-050);
/* === SEMANTIC COLOUR ROLES (use THESE in components) =================== */
--color-bg: var(--grey-100); /* page background */
--color-surface: var(--white); /* cards, inputs */
--color-surface-alt: var(--navy-050); /* secondary panels */
--color-surface-invert: var(--navy); /* navy blocks, footer, hero */
--color-text: var(--grey-900); /* body */
--color-text-secondary: var(--grey-500);
--color-text-muted: var(--grey-400);
--color-text-on-navy: var(--white); /* text on navy */
--color-text-on-gold: var(--navy); /* text on gold buttons */
--color-heading: var(--navy); /* headings default to navy */
--color-border: var(--grey-300);
--color-divider: var(--grey-200);
--color-primary: var(--navy); /* primary structural colour */
--color-primary-hover: var(--navy-700);
--color-accent: var(--gold); /* CTAs, highlights — sparing */
--color-accent-hover: var(--gold-600);
--color-accent-active: var(--gold-700);
--color-link: var(--navy-600);
--color-link-hover: var(--gold-700);
/* === TYPOGRAPHY ======================================================== */
--font-heading: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-accent: "Caveat", cursive; /* RARE human touch only */
--font-mono: "SF Mono", "Roboto Mono", ui-monospace, monospace; /* numeric results */
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
/* Type scale (1.25 major-third-ish, tuned). size / line-height */
--text-xs: 0.75rem; --lh-xs: 1.5; /* 12 — captions, help text */
--text-sm: 0.875rem; --lh-sm: 1.55; /* 14 — labels, secondary */
--text-base: 1rem; --lh-base: 1.6; /* 16 — body */
--text-lg: 1.125rem; --lh-lg: 1.55; /* 18 — lead */
--text-xl: 1.375rem; --lh-xl: 1.4; /* 22 — card titles */
--text-2xl: 1.75rem; --lh-2xl: 1.3; /* 28 — section headings */
--text-3xl: 2.25rem; --lh-3xl: 1.2; /* 36 — tool title */
--text-4xl: 3rem; --lh-4xl: 1.1; /* 48 — hero / result number */
--tracking-tight: -0.02em; /* headings */
--tracking-normal: 0;
--tracking-wide: 0.06em; /* eyebrows / small caps labels */
/* === SPACING (8px base, generous — whitespace reads as premium) ======== */
--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 — section rhythm */
/* === RADIUS ============================================================ */
--radius-sm: 6px;
--radius-md: 10px; /* inputs, buttons */
--radius-lg: 16px; /* cards */
--radius-xl: 24px; /* hero panels */
--radius-pill: 999px;
/* === SHADOWS (soft, premium — never heavy) ============================= */
--shadow-xs: 0 1px 2px rgba(10, 31, 68, 0.05);
--shadow-sm: 0 2px 6px rgba(10, 31, 68, 0.06);
--shadow-md: 0 6px 20px rgba(10, 31, 68, 0.08);
--shadow-lg: 0 16px 40px rgba(10, 31, 68, 0.12);
--shadow-gold: 0 6px 18px rgba(197, 157, 95, 0.28); /* gold CTA lift */
/* === LAYOUT ============================================================ */
--container-max: 1120px; /* max content width */
--container-pad: var(--space-5);
--tool-gap: var(--space-6); /* gap between input col & result col */
--input-col: minmax(0, 1.1fr);
--result-col: minmax(0, 0.9fr);
/* === MOTION (subtle only) ============================================= */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* === FOCUS (accessibility floor — keep visible) ======================= */
--focus-ring: 0 0 0 3px rgba(197, 157, 95, 0.45); /* gold ring */
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================================
MINIMAL BASE BINDING (optional but recommended)
Makes the fonts + colours actually apply. Keep it thin; real component
styles live in the component files, not here.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--lh-base);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
color: var(--color-heading);
letter-spacing: var(--tracking-tight);
font-weight: var(--fw-semibold);
margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
h3 { font-size: var(--text-xl); line-height: var(--lh-xl); }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* ----------------------------------------------------------------------------
FLASK / JINJA USAGE (this project): serve this file from static/css and link it
once in base.html, before your component styles:
Then every Jinja partial and page references the tokens via var(--...). No build
step, no Tailwind — tokens.css is the single source of truth.
MOBILE-FIRST: write base rules for the 375px phone view, then layer desktop
overrides in `@media (min-width: 768px)` blocks. Never the reverse.
-------------------------------------------------------------------------- */