/**
 * Design System - Phoenix Code Catalog
 *
 * Principles:
 * - Colors: 60-30-10 Rule (Neutral-Complementary-Brand)
 * - Fonts: 4-2 Principle (4 sizes, 2 weights)
 * - Spacing: 8pt Grid System
 * - No gradients, flat colors only
 */

/* ========== Google Font Import - Figtree ========== */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
    /* ========================================
       COLORS - 60-30-10 Rule
       ======================================== */

    /* 60% - Neutral (Backgrounds) */
    --color-white: #FFFFFF;
    --color-neutral-50: #FAFAFA;
    --color-neutral-100: #F5F5F5;
    --color-neutral-200: #E8E8E8;

    /* 30% - Complementary (Text, Borders, Icons) */
    --color-neutral-400: #A0A0A0;
    --color-neutral-600: #666666;
    --color-neutral-800: #2D2D2D;
    --color-black: #000000;

    /* 10% - Brand (Primary Actions, Accents) */
    --color-brand-light: #AE6E4E;
    --color-brand: #8B4411;
    --color-brand-dark: #6B3410;

    /* Semantic Colors */
    --color-error: #DC2626;
    --color-success: #16A34A;
    --color-warning: #F59E0B;

    /* Derived Colors (Opacity variants of brand) */
    --color-brand-10: rgba(139, 68, 17, 0.1);
    --color-brand-20: rgba(139, 68, 17, 0.2);
    --color-brand-50: rgba(139, 68, 17, 0.5);

    /* ========================================
       TYPOGRAPHY - 4-2 Principle
       ======================================== */

    /* Font Family - Figtree (Preply-inspired) */
    --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: var(--font-family);

    /* Font Sizes (4 only) */
    --text-xs: 0.75rem;    /* 12px - Labels, Badges, Captions */
    --text-sm: 0.875rem;   /* 14px - Body, Buttons, Inputs */
    --text-md: 1rem;       /* 16px - Subheadings, Important Text */
    --text-lg: 1.25rem;    /* 20px - Headings, Titles */

    /* Font Weights (2 only) */
    --font-normal: 400;
    --font-bold: 600;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* ========================================
       SPACING - 8pt Grid System
       ======================================== */

    /* Base unit: 8px */
    --space-0: 0;
    --space-1: 0.25rem;    /* 4px - Micro spacing */
    --space-2: 0.5rem;     /* 8px - Tight spacing */
    --space-3: 1rem;       /* 16px - Standard spacing */
    --space-4: 1.5rem;     /* 24px - Comfortable spacing */
    --space-5: 2rem;       /* 32px - Section spacing */
    --space-6: 3rem;       /* 48px - Large section spacing */

    /* Component Spacing */
    --space-inset-sm: var(--space-2);              /* Inside small components */
    --space-inset-md: var(--space-3);              /* Inside medium components */
    --space-inset-lg: var(--space-4);              /* Inside large components */

    --space-stack-sm: var(--space-2);              /* Between related items */
    --space-stack-md: var(--space-3);              /* Between elements */
    --space-stack-lg: var(--space-5);              /* Between sections */

    /* ========================================
       LAYOUT
       ======================================== */

    /* Border Radius (8pt aligned) */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Border Width */
    --border-width: 1px;
    --border-width-thick: 2px;

    /* Shadows (Simplified) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* ========================================
       COMPONENT TOKENS
       ======================================== */

    /* Navbar */
    --navbar-height: 64px;         /* 8×8 = 64px */
    --navbar-height-mobile: 56px;  /* 7×8 = 56px */

    /* Buttons */
    --button-height: 40px;         /* 5×8 = 40px */
    --button-height-sm: 32px;      /* 4×8 = 32px */
    --button-height-lg: 48px;      /* 6×8 = 48px */

    /* Inputs */
    --input-height: 40px;
    --input-height-lg: 48px;

    /* Cards */
    --card-padding: var(--space-3);
    --card-radius: var(--radius-md);
    --card-gap: var(--space-3);

    /* Touch Target (Accessibility) */
    --touch-target-min: 44px;

    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-navbar: 1000;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Colors */
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-neutral-600); }
.text-dark { color: var(--color-neutral-800); }
.text-brand { color: var(--color-brand); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* Background Colors */
.bg-white { background-color: var(--color-white); }
.bg-neutral { background-color: var(--color-neutral-100); }
.bg-brand { background-color: var(--color-brand); }
.bg-brand-light { background-color: var(--color-brand-10); }

/* Font Sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }

/* Font Weights */
.font-normal { font-weight: var(--font-normal); }
.font-bold { font-weight: var(--font-bold); }

/* Spacing Utilities */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    :root {
        /* Slightly smaller text on mobile */
        --text-lg: 1.125rem;   /* 18px on mobile */

        /* Adjusted spacing */
        --space-4: 1.25rem;    /* 20px on mobile */
        --space-5: 1.5rem;     /* 24px on mobile */
        --space-6: 2rem;       /* 32px on mobile */
    }
}