/* ========================================================================== TECH4ART DESIGN SYSTEM — TOKENS Site token layer. Values are reconciled with the canonical design system at docs/design/colors_and_type.css — THAT file is the source of truth. Reconcile any change here against it (palette, gradients, type, shadows). Palette sampled from the brand "A" mark: olive-green → teal → deep blue. ========================================================================== */ /* Fonts are self-hosted — see src/styles/fonts.css (@fontsource). Do not re-add a Google Fonts @import here: it would transmit visitor IP addresses to Google. */ :root { /* === BRAND PALETTE — sampled from the master "A" mark === */ --t4a-green: #7BA935; /* olive/lime, the warm anchor */ --t4a-green-dark: #5D7F26; --t4a-green-deep: #3F5A14; --t4a-teal: #00A6C8; /* primary mid hue */ --t4a-teal-bright: #00C2D6; --t4a-teal-deep: #007A99; --t4a-blue: #1F73B8; /* signature deep blue */ --t4a-blue-bright: #2E8FD1; --t4a-blue-deep: #16385E; --t4a-blue-ink: #0E2440; /* near-black ink for headings */ /* Semantic accents (borrow from brand family) */ --t4a-success: var(--t4a-green); --t4a-info: var(--t4a-teal); --t4a-warning: #E0A21A; --t4a-danger: #C8463A; /* Cool blue-tinted neutrals */ --t4a-neutral-0: #FFFFFF; --t4a-neutral-50: #F5F7FA; --t4a-neutral-100: #E8ECF1; --t4a-neutral-200: #D3DAE3; --t4a-neutral-300: #B2BDCC; --t4a-neutral-400: #8593A8; --t4a-neutral-500: #5E6B80; --t4a-neutral-600: #424E63; --t4a-neutral-700: #2C3647; --t4a-neutral-800: #1B2331; --t4a-neutral-900: #0E1420; /* === SEMANTIC TOKENS — light mode === */ --bg: var(--t4a-neutral-0); --bg-subtle: var(--t4a-neutral-50); --bg-muted: var(--t4a-neutral-100); --bg-inverse: var(--t4a-blue-ink); --surface: var(--t4a-neutral-0); --surface-raised: var(--t4a-neutral-0); --surface-sunken: var(--t4a-neutral-50); --fg: var(--t4a-blue-ink); --fg-1: var(--t4a-blue-ink); --fg-2: var(--t4a-neutral-600); --fg-3: var(--t4a-neutral-500); --fg-muted: var(--t4a-neutral-400); --fg-inverse: var(--t4a-neutral-0); --fg-on-brand: var(--t4a-neutral-0); --border: var(--t4a-neutral-200); --border-strong: var(--t4a-neutral-300); --border-inverse: rgba(255,255,255,.14); --accent: var(--t4a-teal); --accent-strong: var(--t4a-blue); --accent-warm: var(--t4a-green); --accent-text: var(--t4a-teal-deep); /* accent used as small text — AA on light surfaces */ --link: var(--t4a-blue); --link-hover: var(--t4a-blue-deep); /* === GRADIENTS — always 4-stop === */ --gradient-signature: linear-gradient(135deg, var(--t4a-green) 0%, var(--t4a-teal) 35%, var(--t4a-blue) 70%, var(--t4a-blue-deep) 100%); --gradient-cool: linear-gradient(180deg, var(--t4a-teal-bright) 0%, var(--t4a-teal) 35%, var(--t4a-blue) 70%, var(--t4a-blue-ink) 100%); --gradient-warm-ridge: linear-gradient(90deg, var(--t4a-green-deep) 0%, var(--t4a-green) 33%, var(--t4a-teal) 66%, var(--t4a-blue) 100%); --gradient-ink: linear-gradient(160deg, var(--t4a-blue-ink) 0%, var(--t4a-blue-deep) 40%, var(--t4a-teal-deep) 75%, var(--t4a-teal) 100%); /* === TYPE === */ --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-60: 3.75rem; --fs-72: 4.5rem; --fs-96: 6rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.6; --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-wide: 0.04em; --tr-wider: 0.12em; /* === SPACING — 4px baseline === */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* === CONTAINERS === */ --container-narrow: 720px; --container: 1180px; --container-wide: 1440px; /* === RADII — sharp by default === */ --radius-0: 0; --radius-1: 2px; --radius-pill: 999px; /* === BORDER WIDTHS === */ --bw-1: 1px; --bw-2: 2px; --bw-accent: 3px; /* === SHADOWS — cool-tinted, low-spread === */ --shadow-1: 0 1px 0 rgba(14,36,64,.04), 0 1px 2px rgba(14,36,64,.06); --shadow-2: 0 2px 4px rgba(14,36,64,.06), 0 6px 12px rgba(14,36,64,.08); --shadow-3: 0 8px 16px rgba(14,36,64,.10), 0 24px 48px rgba(14,36,64,.10); --shadow-focus: 0 0 0 3px rgba(0,166,200,.35); --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(14,36,64,.05); /* === MOTION === */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ============================================================ DARK MODE — inverse semantics (site-only; not in the canonical docs/design/colors_and_type.css — keep this block site-side) ============================================================ */ [data-theme="dark"] { --bg: #06101F; --bg-subtle: #0B1A2E; --bg-muted: #122339; --bg-inverse: var(--t4a-neutral-0); --surface: #0B1A2E; --surface-raised: #122339; --surface-sunken: #06101F; --fg: var(--t4a-neutral-50); --fg-1: var(--t4a-neutral-0); --fg-2: var(--t4a-neutral-200); --fg-3: var(--t4a-neutral-400); --fg-muted: var(--t4a-neutral-500); --fg-inverse: var(--t4a-neutral-900); --fg-on-brand: var(--t4a-neutral-0); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.20); --border-inverse: var(--t4a-neutral-200); --accent: var(--t4a-teal-bright); --accent-strong: var(--t4a-teal); --accent-text: var(--t4a-teal-bright); /* brighter teal — AA on dark surfaces */ --link: var(--t4a-teal-bright); --link-hover: var(--t4a-blue-bright); --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 6px 18px rgba(0,0,0,0.45); --shadow-3: 0 18px 44px rgba(0,0,0,0.55); }