/* ============================================================ Archways ABA — Design Token System ============================================================ HOW TO REBRAND: This file is the single source of truth for all visual design decisions. To change the brand: 1. Update the PRIMITIVE VALUES in the "Brand Palette" section 2. Update the SEMANTIC ALIASES to point to new primitives 3. Font: Change --font-sans in "Typography" section 4. Everything in styles.css uses these variables automatically COLOR BRAND: Primary = Deep Teal (#074F57) Accent = Gold (#C9A843) Secondary = Teal Light (#14B8A6) ============================================================ */ :root { /* ────────────────────────────────────────────────────────── BRAND PALETTE — PRIMITIVE VALUES Change these to rebrand. The semantic aliases below will automatically pick up your new colors. ────────────────────────────────────────────────────────── */ /* Teal / Primary scale */ --teal-50: #EDFAFA; --teal-100: #C9F0EF; --teal-200: #8FD9D7; --teal-300: #54C0BC; --teal-400: #20A39E; --teal-500: #0D8780; /* mid teal */ --teal-600: #0A6E69; /* brand teal */ --teal-700: #085A55; --teal-800: #074F57; /* deep teal (primary) */ --teal-900: #042E33; --teal-950: #021A1D; /* Gold / Accent scale */ --gold-50: #FDF9ED; --gold-100: #FAF0C9; --gold-200: #F5E094; --gold-300: #EFD05E; --gold-400: #E9BF28; /* vivid gold */ --gold-500: #C9A843; /* brand gold */ --gold-600: #A88629; --gold-700: #86671A; --gold-800: #64490D; --gold-900: #422A05; --gold-950: #211403; /* Teal Light / Secondary scale */ --teal-light-50: #F0FDFC; --teal-light-100: #CCFBF6; --teal-light-200: #99F6EC; --teal-light-300: #5EEADC; --teal-light-400: #2DD4C6; --teal-light-500: #14B8A6; /* vibrant teal (secondary) */ --teal-light-600: #0D9488; --teal-light-700: #0F766E; --teal-light-800: #115E59; --teal-light-900: #134E4A; --teal-light-950: #042F2E; /* Neutral scale */ --neutral-50: #F8FAFC; --neutral-100: #F1F5F9; --neutral-200: #E2E8F0; --neutral-300: #CBD5E1; --neutral-400: #94A3B8; --neutral-500: #64748B; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1E293B; --neutral-900: #0F172A; --neutral-950: #020617; /* Pure tones */ --white: #FFFFFF; --black: #000000; /* ────────────────────────────────────────────────────────── SEMANTIC COLOR ALIASES These are what styles.css uses. Change the right-hand value to point to a different primitive if rebranding. ────────────────────────────────────────────────────────── */ /* Primary brand colors */ --color-primary: var(--teal-800); --color-primary-hover: var(--teal-900); --color-primary-light: var(--teal-100); --color-primary-mid: var(--teal-600); /* Accent colors */ --color-accent: var(--gold-500); --color-accent-hover: var(--gold-600); --color-accent-light: var(--gold-50); --color-accent-vivid: var(--gold-400); /* Secondary / teal light */ --color-secondary: var(--teal-light-500); --color-secondary-hover: var(--teal-light-600); --color-secondary-light: var(--teal-light-50); --color-secondary-mid: var(--teal-light-700); /* Surface colors */ --color-bg: var(--white); --color-bg-alt: var(--neutral-50); --color-bg-dark: var(--teal-800); --color-bg-darker: var(--teal-900); --color-surface: var(--white); --color-surface-raised: var(--neutral-50); /* Text colors */ --color-text: var(--teal-900); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-400); --color-text-on-dark: rgba(255, 255, 255, 0.90); --color-text-on-dark-muted: rgba(255, 255, 255, 0.65); /* Border colors */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-border-focus: var(--teal-light-500); /* Status / feedback */ --color-success: #059669; --color-success-light: #ECFDF5; --color-error: #DC2626; --color-error-light: #FEF2F2; --color-warning: #D97706; --color-warning-light: #FFFBEB; /* ────────────────────────────────────────────────────────── TYPOGRAPHY Change --font-sans to use a different typeface. ────────────────────────────────────────────────────────── */ /* Font families */ --font-sans: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace; --font-serif: Georgia, 'Times New Roman', serif; /* fallback, rarely used */ /* Font weight scale */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold:800; /* Type size scale — uses clamp() for fluid sizing */ --text-xs: clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem); --text-sm: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem); --text-base: clamp(0.938rem, 0.92rem + 0.09vw, 1rem); --text-lg: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --text-xl: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --text-2xl: clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem); --text-3xl: clamp(1.5rem, 1.32rem + 0.89vw, 1.875rem); --text-4xl: clamp(1.875rem, 1.57rem + 1.52vw, 2.5rem); --text-5xl: clamp(2.25rem, 1.75rem + 2.50vw, 3.25rem); --text-6xl: clamp(2.75rem, 2.0rem + 3.75vw, 4.25rem); --text-7xl: clamp(3.25rem, 2.25rem + 5.00vw, 5.5rem); /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed:1.75; --leading-loose: 2; /* Letter spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ────────────────────────────────────────────────────────── SPACING SCALE Base unit: 4px (--space-1 = 4px) Scale: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32 ────────────────────────────────────────────────────────── */ --space-px: 1px; --space-0: 0px; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ /* Section padding */ --section-padding-y: clamp(3.5rem, 2rem + 5vw, 6rem); --section-padding-y-sm: clamp(2rem, 1rem + 3vw, 3.5rem); /* ────────────────────────────────────────────────────────── BORDER RADIUS ────────────────────────────────────────────────────────── */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* Semantic aliases */ --radius-btn: var(--radius-md); --radius-card: var(--radius-xl); --radius-badge: var(--radius-full); --radius-input: var(--radius-md); /* ────────────────────────────────────────────────────────── SHADOWS Multi-layer shadows create depth. Brand-colored shadows give a premium feel. ────────────────────────────────────────────────────────── */ /* Neutral shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10); --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.07), 0 24px 64px rgba(0, 0, 0, 0.12); --shadow-2xl: 0 8px 24px rgba(0, 0, 0, 0.08), 0 40px 96px rgba(0, 0, 0, 0.14); /* Brand-colored shadows — used on hover states */ --shadow-primary: 0 4px 14px rgba(7, 79, 87, 0.25), 0 2px 6px rgba(7, 79, 87, 0.15); --shadow-accent: 0 4px 14px rgba(201, 168, 67, 0.35), 0 2px 6px rgba(201, 168, 67, 0.20); --shadow-secondary: 0 4px 14px rgba(20, 184, 166, 0.28), 0 2px 6px rgba(20, 184, 166, 0.16); /* Card hover shadow */ --shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(7, 79, 87, 0.14), 0 0 0 1px rgba(20, 184, 166, 0.12); /* ────────────────────────────────────────────────────────── TRANSITIONS ────────────────────────────────────────────────────────── */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ --transition-fast: var(--duration-fast) var(--ease-default); --transition-base: var(--duration-base) var(--ease-default); --transition-slow: var(--duration-slow) var(--ease-default); /* ────────────────────────────────────────────────────────── Z-INDEX SCALE Use these to avoid z-index wars. ────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown:100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* ────────────────────────────────────────────────────────── LAYOUT TOKENS ────────────────────────────────────────────────────────── */ /* Container widths */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* default max-width */ --container-2xl: 1440px; /* Container horizontal padding */ --container-px: clamp(1rem, 4vw, 2rem); /* Nav height */ --nav-height: 72px; /* Content column widths */ --content-narrow: 680px; --content-reading: 720px; --content-wide: 960px; /* Grid gaps */ --gap-grid: clamp(1.25rem, 2vw, 2rem); --gap-section: clamp(2rem, 4vw, 4rem); }