/* ============================================================================
   theme-memoro-light.css — MEMORO Light Theme

   Warm, minimal-shadow theme inspired by modern conversational UIs.
   Features cream/stone backgrounds, near-zero shadows, and neutral brand.
   Color comes from entity tints, not UI chrome. Elements float through contrast.
   ============================================================================ */

.theme-light {
    /* ------------------------------------------------------------------
       COLOR SCALE: Stone (warm gray with beige undertone)
       ------------------------------------------------------------------ */
    --color-gray-50: #fafaf9;
    --color-gray-100: #f5f5f4;
    --color-gray-200: #e7e5e4;
    --color-gray-300: #d6d3d1;
    --color-gray-400: #a8a29e;
    --color-gray-500: #78716c;
    --color-gray-600: #57534e;
    --color-gray-700: #44403c;
    --color-gray-800: #292524;
    --color-gray-900: #1c1917;

    /* ------------------------------------------------------------------
       COLOR SCALE: Coral Accent
       ------------------------------------------------------------------ */
    --color-coral-50: #fef7f5;
    --color-coral-100: #fdeee9;
    --color-coral-200: #f9d5ca;
    --color-coral-300: #f2b5a3;
    --color-coral-400: #e8927a;
    --color-coral-500: #db7c63;
    --color-coral-600: #c96b52;
    --color-coral-700: #a85544;
    --color-coral-800: #8a4739;
    --color-coral-900: #723d32;

    /* ------------------------------------------------------------------
       SEMANTIC: Backgrounds — Warm cream/stone
       Floating effect achieved through color contrast, not shadows
       ------------------------------------------------------------------ */
    --color-bg: #f5f4f2;
    --color-bg-rgb: 245, 244, 242;
    --color-bg-muted: #efeee9;
    --color-bg-panel: #fff;
    --color-bg-panel-glass: rgba(255, 255, 255, 0.6);
    --color-bg-subtle: rgba(0, 0, 0, 0.02);
    --color-bg-white: #fff;
    --color-bg-hover: rgba(0, 0, 0, 0.04);
    --color-bg-hover-subtle: rgba(0, 0, 0, 0.02);
    --color-bg-hover-strong: rgba(0, 0, 0, 0.08);
    --color-bg-active: rgba(0, 0, 0, 0.14);
    --color-bg-input: var(--color-bg-white);
    --color-header-bg: transparent;

    /* Default background gradients — theme-aware, referenced by id from JS */
    --bg-gradient-warm-stone: linear-gradient(145deg, #f0ebe5 0%, #e5ddd4 35%, #ddd3c8 65%, #d5c9bc 100%);
    --bg-gradient-soft-sky: linear-gradient(145deg, #dce8f0 0%, #c5d5e5 40%, #b8cce0 70%, #a8c0d8 100%);
    --bg-gradient-dawn: linear-gradient(145deg, #f0ddd0 0%, #e5c8b8 30%, #dbb8a8 60%, #d0a898 100%);
    --bg-gradient-sage: linear-gradient(145deg, #d5ddd2 0%, #c0ccba 40%, #b0bfa8 70%, #a0b098 100%);
    --bg-gradient-lavender: linear-gradient(145deg, #e0d8e8 0%, #d0c5dd 40%, #c0b5d2 70%, #b0a5c5 100%);
    --bg-gradient-midnight: linear-gradient(145deg, #3a3a4a 0%, #2e2e3e 40%, #262635 70%, #1e1e2a 100%);

    /* Squared paper — warm cream paper with warm grid lines (SVG tile for scrolling) */
    --bg-squared-paper:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23f5f1e6'/%3E%3Cpath d='M23.5 0v24M0 23.5h24' stroke='%23f0ebdc' stroke-width='1'/%3E%3C/svg%3E");
    --bg-squared-paper-color: #f5f1e6;
    --bg-gradient-squared-paper: var(--bg-squared-paper);
    --default-background: var(--bg-squared-paper);

    /* Query bar - more visible to stand out from app backgrounds */
    --query-bar-shadow-top: 0 -4px 16px rgba(28, 25, 23, 0.08);

    /* ------------------------------------------------------------------
       SEMANTIC: Text — Warm neutrals
       ------------------------------------------------------------------ */
    --color-text-main: #1c1917;
    --color-text-secondary: #3f3b37;
    --color-text-muted: #44403c;
    --color-text-subtle: #78716c;
    --color-text-contrast: #fff;
    --color-text-inverse: #fff;

    /* ------------------------------------------------------------------
       SEMANTIC: Borders — Translucent for glass surfaces
       ------------------------------------------------------------------ */
    --color-border: rgba(0, 0, 0, 0.10);
    --color-border-light: rgba(0, 0, 0, 0.06);
    --color-border-strong: rgba(0, 0, 0, 0.14);
    --color-border-dark: rgba(0, 0, 0, 0.22);
    --color-border-overlay: var(--color-border-strong);
    --color-border-subtle: rgba(0, 0, 0, 0.05);

    /* ------------------------------------------------------------------
       SEMANTIC: Shadows — Minimal to none
       Floating achieved through background contrast, not shadows
       ------------------------------------------------------------------ */
    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.02);
    --shadow-md: 0 2px 4px rgba(28, 25, 23, 0.03);
    --shadow-lg: 0 4px 8px rgba(28, 25, 23, 0.04);
    --shadow-xl: 0 8px 16px rgba(28, 25, 23, 0.05);
    --shadow-card: none;
    --shadow-card-hover: 0 2px 8px rgba(28, 25, 23, 0.06);
    --shadow-panel: 0 2px 8px rgba(28, 25, 23, 0.04);
    --shadow-window: var(--shadow-lg);

    /* ------------------------------------------------------------------
       SEMANTIC: Brand — Neutral (no accent color; entity tints provide color)
       ------------------------------------------------------------------ */
    --color-brand: var(--color-gray-800);
    --color-brand-hover: var(--color-gray-700);
    --color-brand-light: var(--color-gray-100);
    --color-brand-soft: var(--color-gray-200);
    --color-brand-subtle: rgba(0, 0, 0, 0.06);
    --color-accent: var(--color-gray-800);
    --color-brand-muted: var(--color-gray-600);

    --color-primary: var(--color-brand);
    --color-primary-hover: var(--color-brand-hover);

    /* Action color — For send buttons, primary CTAs */
    --color-action: var(--color-brand);
    --color-action-hover: var(--color-brand-hover);

    --color-primary-bg: var(--color-brand-light);
    --color-brand-rgb: 41, 37, 36;
    --color-primary-rgb: 41, 37, 36;
    --color-on-primary: #fff;

    /* ------------------------------------------------------------------
       SEMANTIC: Focus — Neutral (overridden per-entity via --entity-focus-color)
       ------------------------------------------------------------------ */
    --entity-focus-color: transparent;
    --color-focus: rgba(41, 37, 36, 0.2);
    --color-focus-ring: 0 0 0 3px var(--color-focus);
    --focus-ring: var(--color-focus-ring);

    /* ------------------------------------------------------------------
       SEMANTIC: Status - Danger (kept distinct from coral)
       ------------------------------------------------------------------ */
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-dark: #991b1b;
    --color-danger-light: #fef2f2;
    --color-danger-muted: #fee2e2;
    --color-danger-border: #fca5a5;
    --color-danger-border-active: #fecaca;
    --color-danger-subtle: rgba(220, 38, 38, 0.1);

    /* ------------------------------------------------------------------
       SEMANTIC: Status - Success
       ------------------------------------------------------------------ */
    --color-success: #16a34a;
    --color-success-hover: #15803d;
    --color-success-light: #f0fdf4;
    --color-success-muted: #dcfce7;
    --color-success-border: #bbf7d0;
    --color-success-dark: #166534;
    --color-success-subtle: rgba(22, 163, 74, 0.1);

    /* ------------------------------------------------------------------
       SEMANTIC: Status - Warning
       ------------------------------------------------------------------ */
    --color-warning: #d97706;
    --color-warning-hover: #b45309;
    --color-warning-light: #fffbeb;
    --color-warning-muted: #fef3c7;
    --color-warning-dark: #92400e;
    --color-attention: var(--color-warning);
    --color-attention-muted: var(--color-warning-muted);
    --color-warning-subtle: rgba(217, 119, 6, 0.1);

    /* ------------------------------------------------------------------
       SEMANTIC: Status - Info
       ------------------------------------------------------------------ */
    --color-info: #2563eb;
    --color-info-muted: #dbeafe;

    /* ------------------------------------------------------------------
       SEMANTIC: Entity/Event Types
       ------------------------------------------------------------------ */
    /* Person (warm stone — neutral, not cold blue) */
    --color-entity-person: #78716c;
    --color-entity-person-bg: #f5f5f4;

    /* Org (teal - warmer green) */
    --color-entity-org: #0d9488;
    --color-entity-org-bg: #f0fdfa;

    /* Call (teal) */
    --color-entity-call: #0d9488;
    --color-entity-call-bg: #f0fdfa;

    /* Trip / Topic (amber) */
    --color-entity-trip: #d97706;
    --color-entity-trip-bg: #fffbeb;
    --color-entity-trip-dark: #b45309;

    /* Project (violet) */
    --color-entity-project: #7c3aed;
    --color-entity-project-bg: #f5f3ff;

    /* Course (violet) */
    --color-entity-course: #7c3aed;
    --color-entity-course-bg: #f5f3ff;

    /* Note (indigo) */
    --color-entity-note: #6366f1;
    --color-entity-note-bg: #eef2ff;

    /* Task (green) */
    --color-entity-task: #16a34a;
    --color-entity-task-bg: #dcfce7;

    /* Relationship / Place (rose - harmonizes with coral) */
    --color-entity-relationship: #e11d48;
    --color-entity-relationship-bg: #fff1f2;
    --color-entity-place: #f43f5e;

    /* AI gradient */
    --color-ai-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --color-ai-bg: rgba(99, 102, 241, 0.1);

    /* ------------------------------------------------------------------
       SCROLLBAR STYLING
       ------------------------------------------------------------------ */
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, 0.15);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

    /* ------------------------------------------------------------------
       INPUT STYLING
       ------------------------------------------------------------------ */
    --input-bg: var(--color-bg-white);
    --input-bg-hover: var(--color-bg-hover);
    --input-bg-focus: var(--color-bg-white);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-gray-600);

    /* ------------------------------------------------------------------
       GLOW SHADOWS (minimal in light theme)
       ------------------------------------------------------------------ */
    --shadow-glow-brand: none;
    --shadow-glow-success: none;
    --shadow-glow-danger: none;

    /* ------------------------------------------------------------------
       COLOR SCHEME
       ------------------------------------------------------------------ */
    color-scheme: light;
}