/* =============================================================
PARASTUDIO — MASTER THEME
/css/theme.css
All design tokens in one place. Edit here, changes
propagate across every page on the site.
HOW TO USE
----------
Add to before any page stylesheets:
TO CUSTOMIZE
------------
Fonts → change --font-display / --font-body
Brand color→ change --color-gold and its variants
Gradient → change --gradient (signature cyan→purple)
Spacing → change --space-* scale
Radii → change --radius-*
============================================================= */
/* -------------------------------------------------------------
FONTS
------------------------------------------------------------- */
:root {
--font-display : 'Overpass', 'Arial Narrow', sans-serif;
--font-body : 'Overpass', 'Helvetica Neue', sans-serif;
--font-mono : 'Overpass Mono', 'Courier New', monospace;
/* @sg-weight: --weight-light | 300 | Light */
--weight-light : 300;
/* @sg-weight: --weight-regular | 400 | Regular */
--weight-regular : 400;
/* @sg-weight: --weight-medium | 500 | Medium */
--weight-medium : 500;
/* @sg-weight: --weight-semibold | 600 | Semibold */
--weight-semibold : 600;
/* @sg-weight: --weight-bold | 700 | Bold */
--weight-bold : 700;
/* @sg-weight: --weight-extrabold | 800 | Extrabold */
--weight-extrabold: 800;
}
/* -------------------------------------------------------------
TYPE SCALE — fluid via clamp()
Never hardcode font sizes — always reference a token.
------------------------------------------------------------- */
:root {
--text-xs : clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); /* 12–14px */
--text-sm : clamp(0.875rem, 0.80rem + 0.35vw, 1rem); /* 14–16px */
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16–18px */
--text-lg : clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem); /* 18–24px */
--text-xl : clamp(1.5rem, 1.20rem + 1.25vw, 2.25rem); /* 24–36px */
--text-2xl : clamp(2rem, 1.20rem + 2.50vw, 3.5rem); /* 32–56px */
--text-3xl : clamp(2.5rem, 1.00rem + 4.00vw, 5rem); /* 40–80px */
--text-hero: clamp(3.5rem, 1.00rem + 10.0vw, 10rem); /* 56–160px */
}
/* -------------------------------------------------------------
LETTER SPACING
------------------------------------------------------------- */
:root {
--tracking-tight : -0.03em;
--tracking-snug : -0.01em;
--tracking-normal : 0em;
--tracking-wide : 0.02em;
--tracking-wider : 0.06em;
--tracking-widest : 0.12em;
--tracking-display: 0.03em; /* uppercase display — matches portfolio */
}
/* -------------------------------------------------------------
LINE HEIGHTS
------------------------------------------------------------- */
:root {
--leading-none : 1;
--leading-tight : 1.1;
--leading-snug : 1.3;
--leading-normal : 1.6;
--leading-relaxed: 1.75;
}
/* -------------------------------------------------------------
COLOR PALETTE — Light mode (default)
Source: parastudio.com/portfolio
------------------------------------------------------------- */
:root,
[data-theme='light'] {
/* @sg-group: Brand Gradient */
/* Brand gradient — signature cyan-to-purple */
/* @sg-color: --gradient | Brand Gradient | Signature cyan → purple. Combine with .text-gradient. */
--gradient : linear-gradient(92deg, #95d7e3, #eb76ff);
--gradient-hover: linear-gradient(92deg, #7dccd9, #d45aef);
/* @sg-group: Gold — Primary Accent */
/* Gold — primary accent from portfolio */
/* @sg-color: --color-gold | Gold | Primary brand accent, adapts in dark mode */
--color-gold : #e1bc63;
/* @sg-color: --color-gold-hover | Gold Hover | Hover/active state */
--color-gold-hover : #c9a34a;
/* @sg-color: --color-gold-light | Gold Light | Lighter tint for backgrounds */
--color-gold-light : #f2d898;
/* @sg-color: --color-gold-subtle | Gold Subtle | Low-opacity gold fill */
--color-gold-subtle : rgba(225, 188, 99, 0.12);
/* @sg-group: Surfaces */
/* Surfaces */
/* @sg-color: --color-bg | Background | Page background */
--color-bg : #ffffff;
/* @sg-color: --color-surface | Surface | Card and section backgrounds */
--color-surface : #f9f8f5;
/* @sg-color: --color-surface-2 | Surface 2 | Elevated / code block backgrounds */
--color-surface-2 : #f2f0eb;
--color-surface-offset: #eceae4;
/* @sg-color: --color-border | Border | UI borders */
--color-border : #e2e2e2;
--color-divider : #ebebeb;
/* @sg-group: Text */
/* Text */
/* @sg-color: --color-text | Text | Primary body text */
--color-text : #141414;
/* @sg-color: --color-text-muted | Text Muted | Secondary / supporting copy */
--color-text-muted : #666666;
/* @sg-color: --color-text-light | Text Light | Captions, placeholders */
--color-text-light : #999999; /* matches portfolio --text-light */
--color-text-inverse: #ffffff;
/* Semantic roles */
--color-primary : var(--color-gold);
--color-primary-hover: var(--color-gold-hover);
--color-link : var(--color-text);
--color-link-hover : var(--color-gold);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.13);
}
/* -------------------------------------------------------------
COLOR PALETTE — Dark mode override
------------------------------------------------------------- */
[data-theme='dark'] {
--color-bg : #0e0d0c;
--color-surface : #141311;
--color-surface-2 : #1b1a17;
--color-surface-offset: #222019;
--color-border : #282520;
--color-divider : #201e1b;
--color-text : #e8e5e0;
--color-text-muted : #7a7872;
--color-text-light : #555250;
--color-text-inverse : #141414;
--color-gold : #f0ca70;
--color-gold-hover : #d4a94d;
--color-gold-light : #f9e0a8;
--color-gold-subtle : rgba(240, 202, 112, 0.10);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}
/* Respect system preference when no toggle has been set */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-bg : #0e0d0c;
--color-surface : #141311;
--color-surface-2 : #1b1a17;
--color-surface-offset: #222019;
--color-border : #282520;
--color-divider : #201e1b;
--color-text : #e8e5e0;
--color-text-muted : #7a7872;
--color-text-light : #555250;
--color-text-inverse : #141414;
--color-gold : #f0ca70;
--color-gold-hover : #d4a94d;
--color-gold-light : #f9e0a8;
--color-gold-subtle : rgba(240, 202, 112, 0.10);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}
}
/* -------------------------------------------------------------
SPACING — 4px base unit
------------------------------------------------------------- */
:root {
/* @sg-space: --space-1 | 0.25rem | 4px */
--space-1 : 0.25rem; /* 4px */
/* @sg-space: --space-2 | 0.5rem | 8px */
--space-2 : 0.5rem; /* 8px */
/* @sg-space: --space-3 | 0.75rem | 12px */
--space-3 : 0.75rem; /* 12px */
/* @sg-space: --space-4 | 1rem | 16px */
--space-4 : 1rem; /* 16px */
/* @sg-space: --space-5 | 1.25rem | 20px */
--space-5 : 1.25rem; /* 20px */
/* @sg-space: --space-6 | 1.5rem | 24px */
--space-6 : 1.5rem; /* 24px */
/* @sg-space: --space-8 | 2rem | 32px */
--space-8 : 2rem; /* 32px */
/* @sg-space: --space-10 | 2.5rem | 40px */
--space-10: 2.5rem; /* 40px */
/* @sg-space: --space-12 | 3rem | 48px */
--space-12: 3rem; /* 48px */
/* @sg-space: --space-16 | 4rem | 64px */
--space-16: 4rem; /* 64px */
/* @sg-space: --space-20 | 5rem | 80px */
--space-20: 5rem; /* 80px */
/* @sg-space: --space-24 | 6rem | 96px */
--space-24: 6rem; /* 96px */
/* @sg-space: --space-32 | 8rem | 128px */
--space-32: 8rem; /* 128px */
}
/* -------------------------------------------------------------
LAYOUT WIDTHS
------------------------------------------------------------- */
:root {
--content-narrow : 640px;
--content-default: 1080px; /* matches portfolio max-width */
--content-wide : 1280px;
--content-full : 100%;
--gutter : clamp(1.25rem, 5vw, 3rem);
}
/* -------------------------------------------------------------
BORDER RADIUS
------------------------------------------------------------- */
:root {
--radius-sm : 0.25rem;
--radius-md : 0.5rem;
--radius-lg : 0.75rem;
--radius-xl : 1rem;
--radius-full: 9999px;
}
/* -------------------------------------------------------------
MOTION
------------------------------------------------------------- */
:root {
--ease-out : cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out : cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast : 120ms;
--duration-normal: 200ms;
--duration-slow : 400ms;
--transition : 200ms cubic-bezier(0.16, 1, 0.3, 1);
}