/* -------------------------------------------------------------------------
   FRANK DESIGN SYSTEM — COMPLETE UI THEME ARCHITECTURE
   Theme 1: MONOCHROME (Classic & Timeless)
   Theme 2: SANDSTONE (Warm & Comfortable)
   ------------------------------------------------------------------------- */

:root {
    /* Device Safe Area Insets (Notch, Status Bar, Bottom Gesture Bar) */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Spacing Scale */
    --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;

    /* Border Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Z-Index Hierarchy */
    --z-base: 1;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-cursor: 9999;

    /* Motion & Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* =========================================================================
   THEME 1: MONOCHROME (Default)
   Classic & Timeless — Luxury, Minimal, High Contrast, Pure Monochrome
   ========================================================================= */
:root,
[data-theme="monochrome"],
html[data-theme="monochrome"],
body[data-theme="monochrome"],
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
body.dark {
    color-scheme: dark;

    /* Explicit Design System Theme Tokens (Section 28) */
    --theme-bg: #0A0A0A;
    --theme-surface: #111111;
    --theme-card: #181818;
    --theme-border: #303030;
    --theme-text: #FFFFFF;
    --theme-text-secondary: #D4D4D4;
    --theme-text-muted: #A1A1AA;
    --theme-accent: #FFFFFF;
    --theme-accent-hover: #E5E5E5;
    --theme-input: #171717;
    --theme-input-border: #303030;
    --theme-input-text: #FFFFFF;
    --theme-input-placeholder: #9CA3AF;
    --theme-input-focus-border: #FFFFFF;
    --theme-input-focus-ring: rgba(255, 255, 255, 0.15);
    --theme-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);

    /* Left Showcase Auth Tokens (Monochrome) */
    --showcase-bg: linear-gradient(160deg, #0A0A0A 0%, #111111 60%, #171717 100%);
    --showcase-border: #303030;
    --showcase-title: #FFFFFF;
    --showcase-subtitle: #A3A3A3;
    --showcase-text: #D4D4D4;
    --showcase-feature-text: #D4D4D4;
    --showcase-icon-bg: #202020;
    --showcase-icon-color: #FFFFFF;
    --showcase-icon-border: #303030;
    --showcase-footer: #A1A1AA;
    --showcase-logo-bg: rgba(255, 255, 255, 0.05);
    --showcase-logo-border: rgba(255, 255, 255, 0.12);
    --showcase-logo-glow: rgba(255, 255, 255, 0.08);
    --showcase-ring-1: rgba(255, 255, 255, 0.07);
    --showcase-ring-2: rgba(255, 255, 255, 0.04);
    --showcase-streak: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);

    /* Surfaces & Layout Backgrounds */
    --bg-primary: #0A0A0A;
    --bg-secondary: #111111;
    --bg-surface: #171717;
    --bg-elevated: #202020;
    --bg-card: #181818;
    --surface-muted: #262626;
    --surface-hover: #222222;

    /* Mapped legacy tokens */
    --background: #0A0A0A;
    --surface: #171717;
    --surface-elevated: #202020;

    /* Borders */
    --border: #303030;
    --border-strong: #444444;
    --border-hover: #555555;

    /* Typography */
    --text-primary: #FFFFFF;
    --text-secondary: #D4D4D4;
    --text-muted: #A1A1AA;
    --text-subtle: #888888;
    --text: #FFFFFF;
    --text-inverse: #000000;

    /* Accents & Brand */
    --accent: #FFFFFF;
    --accent-hover: #E5E5E5;
    --accent-soft: rgba(255, 255, 255, 0.12);
    --accent-glow: rgba(255, 255, 255, 0.16);
    --accent-cyan: #E5E5E5;
    --accent-violet: #D4D4D4;

    --primary: #FFFFFF;
    --primary-dark: #E5E5E5;
    --primary-hover: #E5E5E5;
    --primary-soft: rgba(255, 255, 255, 0.12);
    --primary-glow: rgba(255, 255, 255, 0.18);
    --primary-text: #000000;
    --btn-primary-bg: #FFFFFF;
    --btn-primary-text: #000000;

    /* Gradients (Monochromatic depth) */
    --gradient-frank: linear-gradient(135deg, #FFFFFF 0%, #D4D4D4 50%, #A3A3A3 100%);
    --gradient-cyan-blue: linear-gradient(135deg, #FFFFFF 0%, #D4D4D4 100%);
    --gradient-showcase: linear-gradient(160deg, #0A0A0A 0%, #111111 60%, #171717 100%);

    /* Navigation & Sidebar */
    --sidebar-bg: #171717;
    --sidebar-item-hover: #202020;
    --sidebar-item-active: #262626;
    --sidebar-item-active-text: #FFFFFF;
    --sidebar-item-active-border: #FFFFFF;

    /* Chat List */
    --chat-list-bg: #111111;
    --chat-item-hover: #202020;
    --chat-item-selected: #262626;
    --unread-bg: #FFFFFF;
    --unread-text: #000000;

    /* Active Chat Window */
    --chat-bg: #0A0A0A;
    --chat-header-bg: #111111;

    /* Message Bubbles */
    --message-sent: #262626;
    --message-sent-text: #FFFFFF;
    --message-received: #1E1E1E;
    --message-received-text: #FFFFFF;

    /* Composer */
    --composer-container-bg: #111111;
    --composer-bg: #111111;
    --composer-input-bg: #171717;
    --composer-border: #303030;
    --composer-text: #FFFFFF;
    --composer-placeholder: #9CA3AF;
    --composer-icon: #D1D5DB;
    --composer-icon-hover: #FFFFFF;
    --composer-send-bg: #FFFFFF;
    --composer-send-text: #000000;
    --composer-send-hover: #E5E5E5;

    /* File Cards */
    --file-card-bg: #1A1A1A;
    --file-card-border: #383838;
    --file-icon-color: #E5E5E5;
    --file-text: #FFFFFF;
    --file-meta: #A1A1AA;

    /* Profile & Cards */
    --card-bg: #181818;
    --frank-id-card-bg: #181818;
    --frank-id-card-border: #383838;
    --frank-id-card-label: #A1A1AA;
    --frank-id-card-value: #FFFFFF;

    /* Status Colors */
    --success: #10B981;
    --success-soft: rgba(16, 185, 129, 0.15);
    --danger: #EF4444;
    --danger-text: #FFFFFF;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.15);
    --info: #3B82F6;

    /* Elevation & Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.65);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9);
}

/* =========================================================================
   THEME 2: SANDSTONE
   Warm & Comfortable — Cream, Sand, Terracotta, Natural, Editorial
   ========================================================================= */
[data-theme="sandstone"],
html[data-theme="sandstone"],
body[data-theme="sandstone"] {
    color-scheme: light;

    /* Explicit Design System Theme Tokens (Section 28) */
    --theme-bg: #F4EBDD;
    --theme-surface: #FFF9F0;
    --theme-card: #F8EFE2;
    --theme-border: #D8C5AA;
    --theme-text: #2D241D;
    --theme-text-secondary: #67584A;
    --theme-text-muted: #8F7B67;
    --theme-accent: #B86B3D;
    --theme-accent-hover: #9F5630;
    --theme-input: #F7EFE3;
    --theme-input-border: #CDB796;
    --theme-input-text: #2D241D;
    --theme-input-placeholder: #8F7B67;
    --theme-input-focus-border: #B86B3D;
    --theme-input-focus-ring: rgba(184, 107, 61, 0.12);
    --theme-shadow: 0 4px 10px rgba(118, 84, 59, 0.12);

    /* Left Showcase Auth Tokens (Sandstone) */
    --showcase-bg: linear-gradient(135deg, #E8D8C2 0%, #F4EBDD 50%, #E2CDB0 100%);
    --showcase-border: #D8C5AA;
    --showcase-title: #2D241D;
    --showcase-subtitle: #76543B;
    --showcase-text: #4A3A2C;
    --showcase-feature-text: #4A3A2C;
    --showcase-icon-bg: #FFF9F0;
    --showcase-icon-color: #B86B3D;
    --showcase-icon-border: #D8C5AA;
    --showcase-footer: #76543B;
    --showcase-logo-bg: rgba(255, 249, 240, 0.9);
    --showcase-logo-border: #D8C5AA;
    --showcase-logo-glow: rgba(184, 107, 61, 0.18);
    --showcase-ring-1: rgba(184, 107, 61, 0.14);
    --showcase-ring-2: rgba(118, 84, 59, 0.12);
    --showcase-streak: linear-gradient(90deg, transparent 0%, rgba(184, 107, 61, 0.15) 30%, rgba(200, 117, 77, 0.18) 60%, rgba(118, 84, 59, 0.12) 85%, transparent 100%);

    /* Surfaces & Layout Backgrounds */
    --bg-primary: #F4EBDD;
    --bg-secondary: #EADCC8;
    --bg-surface: #FFF9F0;
    --bg-elevated: #FFFDF8;
    --bg-card: #F8EFE2;
    --surface-muted: #EADCC8;
    --surface-hover: #EFE1CE;

    /* Mapped legacy tokens */
    --background: #F4EBDD;
    --surface: #FFF9F0;
    --surface-elevated: #FFFDF8;
    --surface-primary: #FFF9F0;

    /* Borders */
    --border: #D8C5AA;
    --border-strong: #B99E7A;
    --border-hover: #B99E7A;

    /* Typography */
    --text-primary: #2D241D;
    --text-secondary: #67584A;
    --text-muted: #8F7B67;
    --text-subtle: #A69380;
    --text: #2D241D;
    --text-inverse: #FFFFFF;

    /* Accents & Brand */
    --accent: #B86B3D;
    --accent-hover: #9F5630;
    --accent-soft: rgba(184, 107, 61, 0.14);
    --accent-glow: rgba(184, 107, 61, 0.28);
    --accent-cyan: #B86B3D;
    --accent-violet: #76543B;

    --primary: #B86B3D;
    --primary-dark: #9F5630;
    --primary-hover: #9F5630;
    --primary-soft: rgba(184, 107, 61, 0.14);
    --primary-glow: rgba(184, 107, 61, 0.28);
    --primary-text: #FFFFFF;
    --btn-primary-bg: #B86B3D;
    --btn-primary-text: #FFFFFF;

    /* Gradients (Warm editorial depth) */
    --gradient-frank: linear-gradient(135deg, #B86B3D 0%, #C8754D 50%, #76543B 100%);
    --gradient-cyan-blue: linear-gradient(135deg, #C8754D 0%, #B86B3D 100%);
    --gradient-showcase: linear-gradient(135deg, #E8D8C2 0%, #F4EBDD 50%, #E2CDB0 100%);

    /* Warm Named Palette Tokens */
    --warm-brown: #76543B;
    --terracotta: #C8754D;
    --cream: #FFF8EA;
    --sand: #D9BE98;
    --olive: #7D8062;

    /* Navigation & Sidebar */
    --sidebar-bg: #FFF9F0;
    --sidebar-item-hover: #EFE1CE;
    --sidebar-item-active: #E5D1B5;
    --sidebar-item-active-text: #2D241D;
    --sidebar-item-active-border: #B86B3D;

    /* Chat List */
    --chat-list-bg: #F8EFE2;
    --chat-item-hover: #EFE1CE;
    --chat-item-selected: #E5D1B5;
    --unread-bg: #C8754D;
    --unread-text: #FFFFFF;

    /* Active Chat Window */
    --chat-bg: #F4EBDD;
    --chat-header-bg: #FFF9F0;

    /* Message Bubbles */
    --message-sent: #B86B3D;
    --message-sent-text: #FFFFFF;
    --message-received: #E8D8C5;
    --message-received-text: #352A22;

    /* Composer */
    --composer-container-bg: #FFF9F0;
    --composer-bg: #FFF9F0;
    --composer-input-bg: #FFFDF8;
    --composer-border: #D8C5AA;
    --composer-text: #2D241D;
    --composer-placeholder: #8F7B67;
    --composer-icon: #76543B;
    --composer-icon-hover: #2D241D;
    --composer-send-bg: #C8754D;
    --composer-send-text: #FFFFFF;
    --composer-send-hover: #B86B3D;

    /* File Cards */
    --file-card-bg: #FFF9F0;
    --file-card-border: #D8C5AA;
    --file-icon-color: #C8754D;
    --file-text: #2D241D;
    --file-meta: #8F7B67;

    /* Profile & Cards */
    --card-bg: #F8EFE2;
    --frank-id-card-bg: #F8EFE2;
    --frank-id-card-border: #D8C5AA;
    --frank-id-card-label: #8F7B67;
    --frank-id-card-value: #2D241D;

    /* Status Colors */
    --success: #5F8064;
    --success-soft: rgba(95, 128, 100, 0.15);
    --danger: #B84C45;
    --danger-text: #FFFFFF;
    --danger-soft: rgba(184, 76, 69, 0.15);
    --warning: #B86B3D;
    --warning-soft: rgba(184, 107, 61, 0.15);
    --info: #76543B;

    /* Elevation & Shadows (Warm soft shadows) */
    --shadow-xs: 0 1px 2px rgba(118, 84, 59, 0.08);
    --shadow-sm: 0 2px 4px rgba(118, 84, 59, 0.1);
    --shadow-md: 0 4px 10px rgba(118, 84, 59, 0.12);
    --shadow-lg: 0 10px 25px rgba(118, 84, 59, 0.14);
    --shadow-xl: 0 20px 40px rgba(118, 84, 59, 0.18);
}