/* ========================================
   CowTech Shared Design Tokens
   P3 step 1: extracted from style.css
   ======================================== */

/* Google Fonts - Oxanium for CowTech */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
    /* Primary / secondary / neutral palette */
    --brand-blue: #1456f0;
    --brand-blue-light: #4f7cff;
    --primary-500: var(--brand-blue);
    --primary-600: #0f46c9;
    --primary-700: #0b3399;

    /* CowTech GEO Accent */
    --geo-green: #00d4aa;
    --geo-green-dark: #00b894;

    /* Text */
    --text-primary: #222222;
    --text-dark: #18181b;
    --text-secondary: #45515e;
    --text-muted: #6b7280;

    /* Surfaces */
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #f0f0f0;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --border-light: #f2f3f5;

    /* Dark */
    --dark-bg: #181e25;
    --dark-surface: #0f1419;

    /* Semantic */
    --success-bg: #e8ffea;

    /* Shadows */
    --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 4px 6px;
    --shadow-ambient: rgba(0, 0, 0, 0.08) 0px 0px 22.576px;
    --shadow-brand: rgba(20, 86, 240, 0.18) 0px 10px 30px -12px;
    --shadow-elevated: rgba(36, 36, 36, 0.08) 0px 12px 16px -4px;
    --shadow-card: rgba(0, 0, 0, 0.06) 0px 8px 24px -4px;

    /* Layout */
    --nav-height: 64px;
    --content-max: 1200px;
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Oxanium', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.50;
    color: var(--text-secondary);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oxanium', 'DM Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.20;
    letter-spacing: 0;
}

h1 { font-size: 64px; font-weight: 700; line-height: 1.10; }
h2 { font-size: 32px; font-weight: 700; }
h3 { font-size: 32px; font-weight: 500; }
h4 { font-size: 24px; font-weight: 500; }
h5 { font-size: 18px; font-weight: 500; }
h6 { font-size: 16px; font-weight: 500; }

p { line-height: 1.60; }

.text-large { font-size: 20px; line-height: 1.50; }
.text-small { font-size: 14px; }
.text-caption { font-size: 14px; color: var(--text-secondary); }
.text-micro { font-size: 12px; }

a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color 0.18s ease;
}
a:hover { color: var(--primary-700); }