/* 
   Wozzy Interface System - Variables 
   Strict Implementation of docs/INTERFACE_SYSTEM.md
*/

:root {
    /* Colors (Theme: Deep Dark) */
    --color-bg: #000000;
    --color-surface: #09090b;
    --color-surface-hover: #18181b;
    --color-border: #27272a;
    --color-pcard-border: #18181b;
    --color-pcard-bg: var(--color-bg);

    --color-text: #ffffff;
    --color-text-muted: #a1a1aa;
    --color-text-dim: #52525b;

    --color-accent: #ffffff;
    --color-on-accent: #000000;
    --color-verified-badge: #ffffff;
    --color-link-preview-border-hover: #3f3f46;
    --color-comments-bg: var(--color-pcard-bg);
    --color-comments-divider: rgba(255, 255, 255, 0.1);
    --color-comments-input-bg: rgba(255, 255, 255, 0.04);
    --color-comments-input-border: rgba(255, 255, 255, 0.08);
    --color-comments-input-focus-bg: rgba(255, 255, 255, 0.06);
    --color-comments-input-focus-border: rgba(255, 255, 255, 0.2);
    --color-link-pill-bg: rgba(255, 255, 255, 0.08);
    --color-link-pill-border: rgba(255, 255, 255, 0.12);
    --color-link-pill-text: #a5b4fc;
    --color-link-pill-hover-bg: rgba(255, 255, 255, 0.12);
    --color-link-pill-hover-border: rgba(255, 255, 255, 0.2);
    --color-link-pill-hover-text: #c4b5fd;
    --color-link-pill-icon-bg: rgba(165, 180, 252, 0.15);
    --color-profile-media-badge-bg: rgba(0, 0, 0, 0.7);
    --color-profile-media-icon: #ffffff;
    --color-post-slider-control-bg: rgba(0, 0, 0, 0.8);
    --color-post-slider-control-hover-bg: rgba(0, 0, 0, 0.7);
    --color-post-slider-control-icon: #ffffff;
    --color-post-slider-indicators-bg: rgba(0, 0, 0, 0.4);
    --color-post-slider-dot: rgba(255, 255, 255, 0.4);
    --color-post-slider-dot-hover: rgba(255, 255, 255, 0.6);
    --color-post-slider-dot-active: #ffffff;

    --color-danger: #ef4444;
    
    /* Navigation / Transparencies (Dark) */
    --color-nav-bg: rgba(0, 0, 0, 0.8);
    --color-glass-border: rgba(255, 255, 255, 0.1);
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

    /* Spacing (4px Grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* Sizing & Radius */
    --container-width: 672px;
    --page-width: 1024px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'Inter Tight', sans-serif;

    --text-3xl: 32px;
    --text-2xl: 24px;
    --text-xl: 20px;
    --text-base: 16px;
    --text-sm: 14px;
    --text-xs: 12px;

    --font-bold: 700;
    --font-semibold: 600;
    --font-medium: 500;
    --font-regular: 400;
}

:root[data-theme="light"] {
    /* Colors (Theme: Threads Light) */
    --color-bg: #f4f4f5;
    --color-surface: #ffffff;
    --color-surface-hover: #fafafa;
    --color-border: #e4e4e7;
    --color-pcard-border: #f4f4f5;
    --color-pcard-bg: var(--color-surface);

    --color-text: #09090b;
    --color-text-muted: #52525b;
    --color-text-dim: #a1a1aa;

    --color-accent: #000000;
    --color-on-accent: #ffffff;
    --color-verified-badge: #09090b;
    --color-link-preview-border-hover: #cbd5e1;
    --color-comments-bg: var(--color-pcard-bg);
    --color-comments-divider: #e4e4e7;
    --color-comments-input-bg: #fafafa;
    --color-comments-input-border: #e4e4e7;
    --color-comments-input-focus-bg: #ffffff;
    --color-comments-input-focus-border: #cbd5e1;
    --color-link-pill-bg: #f8fafc;
    --color-link-pill-border: #dbeafe;
    --color-link-pill-text: #2563eb;
    --color-link-pill-hover-bg: #eff6ff;
    --color-link-pill-hover-border: #bfdbfe;
    --color-link-pill-hover-text: #1d4ed8;
    --color-link-pill-icon-bg: #dbeafe;
    --color-profile-media-badge-bg: rgba(255, 255, 255, 0.88);
    --color-profile-media-icon: #2563eb;
    --color-post-slider-control-bg: rgba(255, 255, 255, 0.9);
    --color-post-slider-control-hover-bg: #ffffff;
    --color-post-slider-control-icon: #09090b;
    --color-post-slider-indicators-bg: rgba(255, 255, 255, 0.88);
    --color-post-slider-dot: rgba(9, 9, 11, 0.28);
    --color-post-slider-dot-hover: rgba(9, 9, 11, 0.5);
    --color-post-slider-dot-active: #09090b;

    --color-danger: #ef4444;
    
    /* Navigation / Transparencies (Light) */
    --color-nav-bg: rgba(255, 255, 255, 0.9);
    --color-glass-border: var(--color-border);
    --shadow: none;
}