/* ========================================================== VARIABLES.CSS Purpose: Central place for all brand/design tokens. Colors and typography are the confirmed KD Designs brand values. Spacing, layout and other tokens below are still sensible defaults, open to refinement later. Because every other file references these variable names (not raw values), updating values here updates the whole site. ============================================================= */ :root { /* ----------------------------------------- COLORS — KD Designs brand Primary is the exact brand gradient. Supporting colors are neutral grays derived from brand black/white, kept deliberately plain so the gradient stays the only accent. No second accent color has been introduced. ------------------------------------------ */ /* Brand gradient (exact, do not alter) */ --color-primary-start: #D77001; /* brand gradient — start */ --color-primary-end: #F3A42C; /* brand gradient — end */ --gradient-primary: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end)); /* Solid fallback for places a gradient can't be used (e.g. text color, borders, box-shadows). Uses the brand's darker exact stop, no new color invented. */ --color-primary: var(--color-primary-start); /* Brand base colors */ --color-black: #000000; --color-white: #FFFFFF; /* Backgrounds */ --color-background: var(--color-white); /* main page background */ --color-surface: #F7F7F7; /* neutral off-white — card/section backgrounds */ /* Text */ --color-text-primary: var(--color-black); /* main text color */ --color-text-secondary: #5C5C5C; /* neutral gray — muted/secondary text */ --color-text-inverse: var(--color-white); /* text on dark backgrounds */ /* Borders */ --color-border: #E0E0E0; /* neutral gray — dividers, outlines */ /* ----------------------------------------- TYPOGRAPHY — KD Designs brand Single family (Plus Jakarta Sans) used across the whole site — headings and body both pull from --font-primary, with weight doing the work of hierarchy rather than mixing typefaces. Loaded via Google Fonts in index.html . Chosen for a clean, modern, geometric-humanist feel that reads well as both a graphic-design and web-design portfolio without leaning on a generic default pairing. ------------------------------------------ */ --font-primary: 'Plus Jakarta Sans', sans-serif; --font-secondary: 'Plus Jakarta Sans', sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.5rem; /* 24px */ --font-size-xl: 2rem; /* 32px */ --font-size-2xl: 2.5rem; /* 40px */ --font-size-3xl: 3rem; /* 48px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* reserved for hero-scale headlines */ /* ----------------------------------------- SPACING SCALE Use these instead of arbitrary px/rem values. ------------------------------------------ */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* ----------------------------------------- LAYOUT ------------------------------------------ */ --container-width: 1200px; /* placeholder — max content width */ --container-padding: 1.5rem; /* placeholder — side padding on smaller screens */ /* ----------------------------------------- BORDER RADIUS ------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* ----------------------------------------- TRANSITIONS ------------------------------------------ */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* ----------------------------------------- BREAKPOINTS (reference only — for use as comments inside media queries later, since CSS variables can't be used inside @media) Mobile: up to 599px Tablet: 600px – 1023px Desktop: 1024px and up ------------------------------------------ */ } /* ========================================================== DARK THEME Overrides only the neutral tokens — background, surface, text, border. The brand gradient/primary orange stays identical in both themes; it reads well on light and dark. Toggled by setting data-theme="dark" on (see js/theme.js and the inline script in index.html's ). ============================================================= */ [data-theme="dark"] { /* Individual sections/cards no longer paint their own solid background in dark mode — this lets the gradient set on body (in components.css) show through everywhere, instead of being hidden behind opaque section blocks. */ --color-background: transparent; --color-surface: #1C1C1F; --color-text-primary: #F5F5F6; --color-text-secondary: #A6A6AD; --color-border: #2C2C31; }