/* Georg Design System — shared tokens for all *.georg.miami sites */
/* Import this file in every sub-site: <link rel="stylesheet" href="georg-design-system.css"> */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Dark mode (default) — warm neutral palette */
:root {
    --bg: #0C0C0C;
    --bg-2: #111111;
    --surface: #141414;
    --surface-2: #1C1C1C;
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.14);
    --text: #F0EDE8;
    --text-2: rgba(240,237,232,0.55);
    --text-3: rgba(240,237,232,0.30);
    --accent: #06B6D4;
    --accent-hover: #22D3EE;
    --accent-glow: rgba(6,182,212,0.10);
    --accent-text: #0C0C0C;
    --status-green: #10B981;
    --status-green-glow: rgba(16,185,129,0.10);
    --r: 12px;
    --r-sm: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    /* Spacing scale */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-section: 80px;
}

/* Light mode — warm cream palette */
[data-theme="light"] {
    --bg: #F8F6F3;
    --bg-2: #F2EFEB;
    --surface: #FFFFFF;
    --surface-2: #F0EDE8;
    --border: rgba(0,0,0,0.06);
    --border-hover: rgba(0,0,0,0.14);
    --text: #1A1A1A;
    --text-2: rgba(0,0,0,0.50);
    --text-3: rgba(0,0,0,0.30);
    --accent: #0891B2;
    --accent-hover: #0E7490;
    --accent-glow: rgba(8,145,178,0.08);
    --accent-text: #FFFFFF;
    --status-green: #059669;
    --status-green-glow: rgba(5,150,105,0.08);
    --shadow: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
}

/* Base */
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    line-height: 1.7;
    transition: background 0.3s ease, color 0.3s ease;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); }

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

code, .mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Layout */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
}

/* Grain overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

[data-theme="light"] body::before {
    opacity: 0.4;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }