/* ============================================
   WREN DESIGN SYSTEM 🐦 - BASE STYLES
   Mobile-First, Consistent Design Tokens
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
    /* ========================================
       COLORS
       ======================================== */

    /* PRIMARY - Terracotta (hero color) */
    --wren-terracotta: #CC785C;
    --wren-terracotta-light: rgba(204, 120, 92, 0.10);
    --wren-terracotta-hover: #B86648;
    --wren-terracotta-dark: #8C4A34;

    /* GREYSCALE - Minimal neutral palette */
    --white: #FFFFFF;
    --black: #000000;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F7;
    --gray-200: #E4E4E7;
    --gray-300: #D4D4D8;
    --gray-400: #A1A1AA;
    --gray-500: #71717A;
    --gray-600: #52525B;
    --gray-700: #3F3F46;
    --gray-800: #27272F;
    --gray-900: #18181B;

    /* SOFT NEUTRAL ACCENT */
    --cream: #F3EEE7;
    --cream-dark: #E5DCD0;

    /* SEMANTIC COLORS - Consistent hover states */
    --success: #1F7A55;
    --success-hover: #196B4A;
    --success-light: rgba(31, 122, 85, 0.10);
    --error: #C7393D;
    --error-hover: #B03236;
    --error-light: rgba(199, 57, 61, 0.10);
    --warning: #C27A1A;
    --warning-hover: #A86816;
    --warning-light: rgba(194, 122, 26, 0.10);
    --info: #2F4858;
    --info-hover: #253D4A;
    --info-light: rgba(47, 72, 88, 0.10);

    /* TAG COLORS - Diverse terracotta-inspired palette */
    --tag-terracotta: #CC785C;
    --tag-terracotta-light: rgba(204, 120, 92, 0.15);
    --tag-coral: #E67E5A;
    --tag-coral-light: rgba(230, 126, 90, 0.15);
    --tag-rust: #B85A3D;
    --tag-rust-light: rgba(184, 90, 61, 0.15);
    --tag-amber: #D4A574;
    --tag-amber-light: rgba(212, 165, 116, 0.15);
    --tag-sage: #7A9B7E;
    --tag-sage-light: rgba(122, 155, 126, 0.15);
    --tag-slate: #5A6B7A;
    --tag-slate-light: rgba(90, 107, 122, 0.15);
    --tag-plum: #8B6A7A;
    --tag-plum-light: rgba(139, 106, 122, 0.15);
    --tag-charcoal: #4A4A4A;
    --tag-charcoal-light: rgba(74, 74, 74, 0.15);
    --tag-burgundy: #9B5A5A;
    --tag-burgundy-light: rgba(155, 90, 90, 0.15);
    --tag-ochre: #C49A5A;
    --tag-ochre-light: rgba(196, 154, 90, 0.15);
    --tag-moss: #6B8B6B;
    --tag-moss-light: rgba(107, 139, 107, 0.15);
    --tag-stone: #7A7A8B;
    --tag-stone-light: rgba(122, 122, 139, 0.15);
    --tag-dust: #A68B7A;
    --tag-dust-light: rgba(166, 139, 122, 0.15);
    --tag-clay: #B88B6B;
    --tag-clay-light: rgba(184, 139, 107, 0.15);
    --tag-earth: #8B6B5A;
    --tag-earth-light: rgba(139, 107, 90, 0.15);

    /* FILE ICON COLORS - Desaturated, functional */
    --icon-pdf: #B94A40;
    --icon-doc: #2B5797;
    --icon-xls: #217346;
    --icon-csv: #5C8A46;
    --icon-ppt: #C14B1C;
    --icon-image: #7B5DAD;
    --icon-video: #E04A5B;
    --icon-audio: #8B5A8C;
    --icon-zip: #6B7280;
    --icon-folder: #D0A97A;
    --icon-text: #6B7A8C;
    --icon-code: #3C7A89;

    /* LINK ICON COLORS - Brand colors */
    --icon-youtube: #FF0000;
    --icon-vimeo: #1AB7EA;
    --icon-spotify: #1DB954;
    --icon-soundcloud: #FF5500;
    --icon-twitch: #9146FF;
    --icon-link: #6B7280;

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);

    /* Font sizes - Mobile first (smaller base) */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 21px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    --text-5xl: 64px;

    /* Font weights - Unified scale */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ========================================
       SPACING
       ======================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Extended spacing for padding */
    --space-14: 56px;

    /* ========================================
       BORDERS
       ======================================== */

    --border-width: 1px;
    --border-width-thick: 1.5px;
    --border-width-heavy: 2px;
    --border-color: var(--gray-300);
    --border-dark: var(--gray-900);

    /* ========================================
       BORDER RADIUS
       ======================================== */

    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ========================================
       SHADOWS - Unified System
       ======================================== */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.14);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16);

    /* Focus shadow - consistent terracotta ring */
    --shadow-focus: 0 0 0 3px var(--wren-terracotta-light);
    --shadow-focus-error: 0 0 0 3px var(--error-light);
    --shadow-focus-success: 0 0 0 3px var(--success-light);

    /* ========================================
       Z-INDEX SCALE - Unified Hierarchy
       ======================================== */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-navbar: 400;
    --z-sidebar: 500;
    --z-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
    --z-popover: 1300;

    /* ========================================
       TRANSITIONS - Unified Timing
       ======================================== */

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-modal: 300ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ========================================
       COMPONENT SIZING - Touch Targets
       ======================================== */

    /* Minimum touch target: 44px (WCAG 2.1) */
    --touch-target-min: 44px;
    --touch-target-sm: 36px;
    --touch-target-lg: 52px;

    /* Input/button heights */
    --input-height-sm: 36px;
    --input-height: 44px;
    --input-height-lg: 52px;

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

    /* Close button - unified size */
    --close-btn-size: 36px;
    --close-btn-size-sm: 32px;

    /* Avatar sizes - unified scale */
    --avatar-xs: 24px;
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 48px;
    --avatar-xl: 56px;

    /* Progress bar heights - unified */
    --progress-height: 8px;
    --progress-height-sm: 4px;
    --progress-height-lg: 12px;

    /* Card padding - unified scale */
    --card-padding-sm: var(--space-4);
    --card-padding: var(--space-6);
    --card-padding-lg: var(--space-8);

    /* Hover transform - unified */
    --hover-lift: -2px;
    --hover-lift-lg: -4px;

    /* ========================================
       BREAKPOINTS (for reference in JS)
       ======================================== */

    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ============================================
   RESET
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--gray-900);
    background: var(--white);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--black);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); font-weight: 800; }
h4 { font-size: var(--text-2xl); font-weight: 800; }
h5 { font-size: var(--text-xl); font-weight: 700; }

p { color: var(--gray-700); line-height: 1.6; }

/* Links - clean defaults */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Clickable cards/elements - never underline */
.card a,
.btn,
button,
[role="button"],
.clickable {
    text-decoration: none !important;
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

.text-center { text-align: center; }
.text-gray { color: var(--gray-600); }
.text-muted { color: var(--gray-500); }

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================
   GLOBAL TOOLTIP STYLES
   ============================================ */

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.share-tooltip {
    position: fixed;
    z-index: 99999;
    background: var(--gray-900);
    color: var(--white);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    max-width: 350px;
    white-space: normal;
    word-break: break-word;
    box-shadow: var(--shadow-lg);
    animation: tooltipFadeIn 0.15s ease;
    pointer-events: none;
}