:root {
    /* Brand Colors */
    --teal-50: #E3F2F0;
    --teal-100: #DFF1EE;
    --teal: #0F3D2E; /* Updated from reference */
    --teal-dark: #0A2A20; /* Updated from reference */
    
    --orange-100: #FDF2DF;
    --orange: #C89B3C; /* Updated from reference (Gold) */
    
    --red-100: #FDECE9;
    --red: #E94B3C;
    
    --ink: #2B1E07; /* Updated from reference (Dark Brown) */
    --muted: #5A6B70;
    --line: #E7E0D0;
    --cream: #F7F4EE; /* Updated from reference */
    --white: #FFFFFF;

    /* Typography Families */
    --display: 'Fraunces', Georgia, serif;
    --body: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    /* Font Sizes */
    --fs-display: 72px;
    --fs-h1: 64px;
    --fs-h2: 48px;
    --fs-h3: 28px;
    --fs-card: 20px;
    --fs-body-lg: 17px;
    --fs-body: 15px;
    --fs-caption: 13px;
    --fs-eyebrow: 11px;

    /* Line Heights */
    --lh-tight: 1.05;
    --lh-base: 1.65;
    --lh-relaxed: 1.8;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px; /* Updated from reference */
    --radius-xl: 32px;
    --radius-2xl: 48px; /* Updated from reference */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-card: 0 1px 2px rgba(10,31,35,0.04);
    --shadow-card-hover: 0 24px 48px -20px rgba(10,31,35,0.2);
    --shadow-button: 0 14px 32px -10px rgba(15,61,46,0.4);
    --shadow-hero: 0 30px 60px -25px rgba(10,31,35,0.35);
    --shadow-pill: 0 10px 30px -10px rgba(10,31,35,0.3);
}

/* Typography Utilities */
.font-display { font-family: var(--display) !important; }
.font-body { font-family: var(--body) !important; }
.font-mono { font-family: var(--mono) !important; }

.text-72 { font-size: var(--fs-display) !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
.text-64 { font-size: var(--fs-h1) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
.text-48 { font-size: var(--fs-h2) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
.text-28 { font-size: var(--fs-h3) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
.text-20 { font-size: var(--fs-card) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
.text-17 { font-size: var(--fs-body-lg) !important; line-height: 1.65 !important; }
.text-15 { font-size: var(--fs-body) !important; line-height: 1.65 !important; }
.text-13 { font-size: var(--fs-caption) !important; line-height: 1.5 !important; }
.text-11 { font-size: var(--fs-eyebrow) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; }

/* Color Utilities */
.text-brand { color: var(--teal) !important; }
.text-brand-dark { color: var(--teal-dark) !important; }
.text-accent { color: var(--orange) !important; }
.text-ink { color: var(--ink) !important; }
.text-muted { color: var(--muted) !important; }
.text-cream { color: var(--cream) !important; }

.bg-brand { background-color: var(--teal) !important; }
.bg-brand-soft { background-color: var(--teal-soft) !important; }
.bg-brand-50 { background-color: var(--teal-50) !important; }
.bg-accent-soft { background-color: var(--orange-soft) !important; }
.bg-cream { background-color: var(--cream) !important; }
.bg-ink { background-color: var(--ink) !important; }
.bg-white { background-color: var(--white) !important; }

.border-brand { border-color: var(--teal) !important; }
.border-line { border-color: var(--line) !important; }

/* Elevation Utilities */
.shadow-brand-card { box-shadow: var(--shadow-card) !important; }
.shadow-brand-hover { box-shadow: var(--shadow-card-hover) !important; }
.shadow-brand-btn { box-shadow: var(--shadow-button) !important; }

/* Container Utilities */
.container-custom {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.inner-container {
    width: 100%;
}

/* Grid Pattern */
.brand-grid-bg {
    background-image:
        linear-gradient(to right, rgba(14, 145, 135, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 145, 135, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* Brand Component Presets */
.brand-guidelines-section {
    padding: var(--space-20) 0;
    margin-top: var(--space-12);
    border-top: 2px solid var(--line);
}

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.brand-swatch {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-card);
}

.brand-swatch-color { 
    height: 80px; 
    position: relative;
}
.brand-swatch-color::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 50%);
}

.brand-swatch-label {
    padding: var(--space-4);
}

.brand-swatch-name {
    font-weight: 600;
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-size: 16px;
}

.brand-swatch-hex {
    font-family: var(--mono);
    color: var(--muted);
    font-size: 11px;
}

.type-specimen-row {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-8);
    align-items: baseline;
}

.type-specimen-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.type-specimen-meta strong {
    color: var(--ink);
    font-family: var(--display);
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

/* Global resets for common elements */
h1, h2, h3, h4, h5 {
    font-family: var(--display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
}

p, label, span, div {
    font-family: var(--body);
}

.brand-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-family: var(--body);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-size: 15px;
}

.brand-btn-primary {
    background: var(--ink) !important;
    color: var(--cream) !important;
    box-shadow: var(--shadow-button);
}

.brand-btn-primary:hover {
    transform: translateY(-2px);
    background: #1a1204 !important;
    color: var(--cream) !important;
}

.brand-btn-teal {
    background: var(--teal);
    color: white;
}

.brand-btn-teal:hover {
    transform: translateY(-2px);
    background: var(--teal-dark);
    color: white;
}

.brand-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}