/* theme.css - Simplified Semantic Palette via OpenProps */

/* 1. Core Fonts */
/* 1. Core Fonts - Loaded via HTML Link in layout.html */

@layer tokens {
  :root {
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-body: "Inter", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 2. Semantic Palette (Light Mode Default) */
  --bg-body: var(--gray-2); /* Darker backdrop to make cards pop */
  --bg-surface: var(--gray-1); /* Slight gray for sidebar to separate */
  --bg-surface-alt: var(--gray-2);
  --text-main: var(--gray-12);
  --text-muted: var(--gray-8); /* Increased from gray-7 for better WCAG AA contrast (4.5:1 minimum) */
  --text-inverted: var(--white);
  
  /* Global Design Tokens */
  --radius-panel: var(--radius-4); /* Standardized Panel Roundness */
  --font-panel: 0.95rem; /* Standardized Panel Text Size */

  /* Borders - Subtle by default, chunky for intentional accents */
  --border: var(--gray-3); /* Subtle default border */
  --border-width: 1px; /* Thin default */
  --border-hover: var(--primary); /* Accent on hover */

  /* Chunky accent borders - use these for intentional "pop" effect */
  --border-chunky: var(--indigo-6);
  --border-chunky-width: 3px;
  --border-chunky-hover: var(--pink-5);

  /* Brand / Action */
  --primary: var(--indigo-6);
  --primary-hover: var(--indigo-7);
  --on-primary: var(--white);
  --accent: var(--pink-5);
  --on-accent: var(--white);
  --color-on-accent: var(--on-accent);

  /* Status Colors */
  --success: var(--green-6);
  --warning: var(--yellow-6);
  --danger: var(--red-6);

  /* Glass/Veil Effects */
  --veil: #0000000d;
  --bg-overlay: rgb(0 0 0 / 75%); /* Semantic Overlay */
  --glass-bg: rgb(255 255 255 / 70%);
  --glass-border: var(--gray-3);

  /* Layout Areas (Light) - Cartoonish/Fresh Tints */
  --bg-header: var(--grape-0); /* Tinted Header */
  --bg-sidebar: var(--blue-0); /* Tinted Sidebar */
  --bg-main: var(--gray-0); /* Clean Main */
  --bg-footer: var(--orange-0); /* Distinct Footer */
  --bg-composer: var(--gray-0);
  --bg-panel: var(--bg-surface); /* Unified Panel Background */
  --bg-status-bar: var(--gray-1);
  /* Chat Bubbles (Light) */
  --bg-bubble-self: var(--indigo-0);
  --border-bubble-self: var(--indigo-3);
  --bg-bubble-peer: var(--pink-0);
  --border-bubble-peer: var(--pink-3);
  /* System messages use soft blue instead of red for better visual harmony */
  --bg-bubble-system: var(--blue-0);
  --border-bubble-system: var(--blue-4);

  /* Peer Themes (6 distinct colors) */
  --peer-theme-1-bg: var(--teal-0);
  --peer-theme-1-border: var(--teal-4);
  --peer-theme-2-bg: var(--cyan-0);
  --peer-theme-2-border: var(--cyan-4);
  --peer-theme-3-bg: var(--lime-0);
  --peer-theme-3-border: var(--lime-5);
  --peer-theme-4-bg: var(--amber-0);
  --peer-theme-4-border: var(--amber-5);
  --peer-theme-5-bg: var(--orange-0);
  --peer-theme-5-border: var(--orange-4);
    --peer-theme-6-bg: var(--pink-0);
    --peer-theme-6-border: var(--pink-4);
  }

  /* 3. Dark Mode Override */
  :root[data-theme="dark"] {
    /* Dark Theme */
    --bg-body: var(--gray-12); /* Deepest Black for backdrop */
    --bg-surface: var(--gray-11);
    --bg-surface-alt: var(--gray-10);

    /* Layout Areas (Dark) - Distinct Deep Tints */
    --bg-header: var(--grape-11);
    --bg-sidebar: var(--blue-11);
    --bg-main: var(--gray-11);
    --bg-footer: var(--orange-11);
    --bg-composer: var(--gray-11);
    --bg-status-bar: var(--gray-10); /* Subtle contrast */
    /* Chat Bubbles (Dark) */
    --bg-bubble-self: var(--indigo-11);
    --border-bubble-self: var(--indigo-8);
    --bg-bubble-peer: var(--pink-11);
    --border-bubble-peer: var(--pink-8);
    /* System messages use soft blue (dark theme) */
    --bg-bubble-system: var(--blue-11);
    --border-bubble-system: var(--blue-7);

    /* Peer Themes (Dark) */
    --peer-theme-1-bg: var(--teal-11);
    --peer-theme-1-border: var(--teal-7);
    --peer-theme-2-bg: var(--cyan-11);
    --peer-theme-2-border: var(--cyan-7);
    --peer-theme-3-bg: var(--lime-11);
    --peer-theme-3-border: var(--lime-7);
    --peer-theme-4-bg: var(--amber-11);
    --peer-theme-4-border: var(--amber-7);
    --peer-theme-5-bg: var(--orange-11);
    --peer-theme-5-border: var(--orange-7);
    --peer-theme-6-bg: var(--pink-11);
    --peer-theme-6-border: var(--pink-7);
    --text-main: var(--gray-0);
    --text-muted: var(--gray-5); /* Increased from gray-4 for better WCAG AA contrast on dark backgrounds */
    --text-inverted: var(--gray-12);
    --border: var(--gray-8); /* Subtle dark mode border */
    --border-hover: var(--primary);
    --border-chunky: var(--indigo-5);
    --border-chunky-hover: var(--pink-4);
    --primary: var(--indigo-5);
    --primary-hover: var(--indigo-4);
    --on-primary: var(--white);
    --accent: var(--pink-5);
    --on-accent: var(--white);
    --color-on-accent: var(--on-accent);
    --glass-bg: rgb(0 0 0 / 40%);
    --glass-border: var(--gray-8);
  }

  :root {
    /* Z-Index Layers - MINIMAL (2 layers only)
       CSS Grid handles layout stacking. HTML5 <dialog> uses browser's top layer.
       Only small inline popups (not in top layer) need explicit z-index. */
    --layer-popup: 10; /* Dropdowns, Tooltips, Emoji picker */
    --layer-critical: 9999; /* Global progress bar (must be above everything) */

    /* ========================================================================
       COMPONENT TOKENS - CSS API for WebC Components
       These provide the public configuration API for components.
       Override these in parent contexts to customize component appearance.
       ======================================================================== */

    /* Button Component API - MIGRATED to component-scoped variables in components.css
       These global variables are kept for backward compatibility but are no longer used internally.
       The .btn component now uses scoped --bg, --color, etc. with fallbacks to semantic tokens.
       To customize buttons, override the scoped variables on the .btn element or its parent. */

    /* Icon Component API */
    --icon-size: 1.5rem;
    --icon-color: currentColor;
    --icon-stroke-width: 1.5;

    /* Input Component API */
    --input-bg: var(--bg-surface);
    --input-color: var(--text-main);
    --input-border-color: var(--border); /* Visible border using theme-aware value */
    --input-border-width: 1px; /* Thin border */
    --input-padding-x: var(--size-3);
    --input-padding-y: var(--size-2);
    --input-radius: var(--radius-2);
    --input-font-size: var(--font-size-1);
    --input-placeholder-color: var(--text-muted);
    --input-focus-border: var(--blue-6); /* Clear focus indication */
    --input-focus-ring: var(--blue-3); /* Subtle focus ring */
    --input-disabled-opacity: 0.5;

    /* Textarea Component API (extends Input) */
    --textarea-min-height: 4rem;
    --textarea-resize: vertical;

    /* Badge Component API */
    --badge-bg: var(--bg-surface-alt);
    --badge-color: var(--text-main);
    --badge-padding-x: var(--size-2);
    --badge-padding-y: var(--size-1);
    --badge-radius: var(--radius-pill);
    --badge-font-size: var(--font-size-0);
    --badge-font-weight: 600;

    /* Card Component API */
    --card-bg: var(--bg-surface);
    --card-border-color: var(--border);
    --card-border-width: var(--border-width);
    --card-padding: var(--size-4);
    --card-radius: var(--radius-panel);
    --card-shadow: var(--shadow-2);

    /* Modal Component API */
    --modal-bg: var(--bg-surface);
    --modal-backdrop: rgb(0 0 0 / 60%);
    --modal-width: min(90vw, 500px);
    --modal-max-height: 85vh;
    --modal-padding: var(--size-4);
    --modal-radius: var(--radius-3);
    --modal-shadow: var(--shadow-5);

    /* Panel Component API */
    --panel-bg: var(--bg-surface);
    --panel-width: min(400px, 90vw);
    --panel-header-bg: var(--bg-surface-alt);
    --panel-padding: var(--size-3);
    --panel-shadow: var(--shadow-5);
    --panel-border-color: var(--border);

    /* Toast Component API */
    --toast-bg: var(--bg-surface);
    --toast-color: var(--text-main);
    --toast-padding: var(--size-3);
    --toast-radius: var(--radius-2);
    --toast-shadow: var(--shadow-4);

    /* Checkbox Component API */
    --checkbox-size: 1.25rem;
    --checkbox-bg: var(--bg-surface);
    --checkbox-border-color: var(--border);
    --checkbox-checked-bg: var(--primary);
    --checkbox-checked-color: var(--on-primary);
    --checkbox-radius: var(--radius-1);

    /* Avatar Component API */
    --avatar-size: 2.5rem;
    --avatar-bg: var(--bg-surface-alt);
    --avatar-color: var(--text-main);
    --avatar-radius: var(--radius-round);
    --avatar-border-width: 2px;
    --avatar-border-color: var(--border);

    /* Chat Bubble Component API (derived from existing bubble tokens) */
    --bubble-padding: var(--size-3);
    --bubble-radius: var(--radius-3);
    --bubble-font-size: var(--font-size-1);
    --bubble-max-width: 75%;

    /* Composer Component API */
    --composer-bg: var(--bg-composer);
    --composer-min-height: 3rem;
    --composer-padding: var(--size-2);
    --composer-radius: var(--radius-2);

    /* Sidebar Component API */
    --sidebar-bg: var(--bg-sidebar);
    --sidebar-width: 4rem;
    --sidebar-padding: var(--size-2);

    /* Header Component API */
    --header-bg: var(--bg-header);
    --header-height: 3.5rem;
    --header-padding: var(--size-3);
  }
} /* End @layer tokens */

/* 4. Global Resets/Utilities */
@layer base {
  body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    
  }
  
  h1,
  h2,
  h3,
  h4 {
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  
  /* Scrollbar Polish */
  ::-webkit-scrollbar {
    width: 0.5rem; /* 8px */
    height: 0.5rem; /* 8px */
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--gray-8);
    border-radius: var(--radius-pill);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-6);
  }
} /* End @layer base */

/* ========================================================================
   REDUCED MOTION - Accessibility preference
   Respects users who prefer less motion for vestibular disorders or preference.
   ======================================================================== */
@layer states {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* ========================================================================
     MICRO-INTERACTIONS - Subtle feedback for user actions
     ======================================================================== */
  
  /* Button press effect - universal */
  button:active:not(:disabled),
  .btn:active:not(:disabled),
  [role="button"]:active:not(:disabled) {
    transform: scale(0.98);
  }
  
  /* Card/surface hover lift - for interactive cards */
  .room-card:hover,
  .peer-card:hover,
  .history-entry:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
  }
  
  /* Icon button hover scale */
  .icon-btn:hover:not(:disabled),
  .sidebar-btn:hover:not(.is-active) {
    transform: scale(1.05);
  }
  
  /* Focus visible enhancement - keyboard navigation feedback */
  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
} /* End @layer states */