/**
 * Dominican Bridge Design System - CSS Variables
 *
 * Brand Colors:
 * - Navy (#1a2b3a): Primary dark color, headers, buttons
 * - Slate (#283f4f): Secondary dark, gradients
 * - Blue (#2b7bb9): Accent color, links, highlights
 */

:root {
    /* Brand Colors */
    --navy: #1a2b3a;
    --slate: #283f4f;
    --blue: #2b7bb9;

    /* Text Colors */
    --text: #333333;
    --text-mid: #5d6c7c;
    --text-light: #757575;

    /* Background Colors */
    --bone: #f5f3ef;
    --white: #ffffff;

    /* UI Colors */
    --border: #e0e0e0;
    --green: #22c55e;
    --yellow: #fbbf24;
    --red: #ef4444;

    /* Shadows */
    --shadow-sm: 0 2px 8px 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.12);
    --shadow-xl: 0 12px 40px rgba(0,0,0,0.15);

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Typography */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-body: 'DM Sans', sans-serif;

    /* Font Sizes */
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 17px;
    --text-lg: 19px;
    --text-xl: 22px;
    --text-2xl: 26px;
    --text-3xl: 32px;
    --text-4xl: 38px;

    /* Border Radius */
    --radius-xs: 1px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Layout */
    --header-height: 56px;
    --max-width: 1200px;
    --max-width-narrow: 800px;
    --max-width-wide: 1400px;
}