/**
 * Ridgeway Maker Theme - CSS Custom Properties
 * Color System: Warm Stone Palette with Blue Accent
 */

:root {
    /* ========================================
       STONE PALETTE (Warm Neutrals)
       ======================================== */
    --stone-900: #1C1917;
    --stone-800: #292524;
    --stone-700: #44403C;
    --stone-600: #57534E;
    --stone-500: #78716C;
    --stone-400: #A8A29E;
    --stone-300: #D6D3D1;
    --stone-200: #E7E5E4;
    --stone-100: #F5F5F4;
    --stone-50: #FAFAF9;

    /* ========================================
       ACCENT COLORS
       ======================================== */
    --accent-blue: #1f7cec;
    --accent-blue-deep: #1565C0;
    --accent-blue-light: #64B5F6;

    /* ========================================
       SEMANTIC COLOR TOKENS (Light Mode Default)
       ======================================== */
    --color-background: var(--stone-50);
    --color-surface: var(--stone-100);
    --color-surface-alt: var(--stone-200);
    --color-border: var(--stone-300);

    --color-text-primary: var(--stone-900);
    --color-text-secondary: var(--stone-700);
    --color-text-muted: var(--stone-500);

    --color-accent-primary: var(--accent-blue);
    --color-accent-hover: var(--accent-blue-deep);

    --color-hero-overlay: rgba(28, 25, 23, 0.6);
    --color-hero-text: #ffffff;

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-base: 16px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: clamp(1.75rem, 3vw, 2.25rem);
    --font-size-4xl: clamp(2rem, 4vw, 3rem);
    --font-size-hero: clamp(2.5rem, 5vw, 4rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* ========================================
       SPACING
       ======================================== */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 6rem;

    /* ========================================
       LAYOUT
       ======================================== */
    --container-max-width: 1200px;
    --content-max-width: 800px;
    --ridge-header-clearance: 80px;

    /* ========================================
       EFFECTS
       ======================================== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
   DARK MODE (System Preference)
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: var(--stone-900);
        --color-surface: var(--stone-800);
        --color-surface-alt: var(--stone-700);
        --color-border: var(--stone-600);

        --color-text-primary: var(--stone-50);
        --color-text-secondary: var(--stone-200);
        --color-text-muted: var(--stone-400);

        --color-accent-primary: var(--accent-blue-light);
        --color-accent-hover: var(--accent-blue);

        --color-hero-overlay: rgba(28, 25, 23, 0.75);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* Manual dark mode override */
[data-theme="dark"] {
    --color-background: var(--stone-900);
    --color-surface: var(--stone-800);
    --color-surface-alt: var(--stone-700);
    --color-border: var(--stone-600);

    --color-text-primary: var(--stone-50);
    --color-text-secondary: var(--stone-200);
    --color-text-muted: var(--stone-400);

    --color-accent-primary: var(--accent-blue-light);
    --color-accent-hover: var(--accent-blue);

    --color-hero-overlay: rgba(28, 25, 23, 0.75);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}