/* ==========================================================================
   rez-chat-tokens.css
   Rez-Chat Design System Tokens
   Version: 1.0.0
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ========== BRAND COLORS ========== */
  --rc-primary: #1D4746;
  --rc-primary-hover: #163938;
  --rc-primary-active: #0F2928;
  --rc-primary-subtle: #E8F4F3;
  
  --rc-secondary: #EC9E2A;
  --rc-secondary-hover: #D88E1F;
  --rc-secondary-active: #C47F18;
  --rc-secondary-subtle: #FEF3E2;

  --rc-accent: #D8CBA8;
  --rc-accent-subtle: #EDE8DA;

  /* ========== BACKGROUNDS ========== */
  --rc-bg: #F5F3EF;
  --rc-surface: #FFFFFF;
  --rc-surface-raised: #FFFFFF;
  --rc-sidebar: #1D4746;
  --rc-sidebar-hover: #245554;
  --rc-sidebar-active: #2D6362;
  --rc-input: #FFFFFF;
  --rc-input-disabled: #E8E6E1;

  /* ========== TEXT ========== */
  --rc-text: #1F4847;
  --rc-text-secondary: #3D6564;
  --rc-text-muted: #5C7A79;
  --rc-text-inverse: #FFFFFF;
  --rc-text-link: #1D4746;
  --rc-text-link-hover: #163938;
  --rc-text-on-primary: #FFFFFF;
  --rc-text-on-secondary: #1F4847;

  /* ========== SEMANTIC ========== */
  --rc-success: #2E7D32;
  --rc-success-hover: #256427;
  --rc-success-subtle: #E8F5E9;
  --rc-success-text: #1B5E20;
  
  --rc-warning: #ED6C02;
  --rc-warning-hover: #D35F00;
  --rc-warning-subtle: #FFF4E5;
  --rc-warning-text: #B45309;
  
  --rc-danger: #D32F2F;
  --rc-danger-hover: #B92626;
  --rc-danger-subtle: #FFEBEE;
  --rc-danger-text: #C62828;

  --rc-info: #0288D1;
  --rc-info-subtle: #E1F5FE;
  --rc-info-text: #01579B;

  /* ========== BORDERS ========== */
  --rc-border: #D1CCC3;
  --rc-border-subtle: #E8E6E1;
  --rc-border-strong: #A69F94;
  --rc-border-focus: #1D4746;

  /* ========== INTERACTIVE ========== */
  --rc-focus-ring: #EC9E2A;
  --rc-focus-ring-offset: #FFFFFF;
  --rc-hover: rgba(29, 71, 70, 0.06);
  --rc-hover-strong: rgba(29, 71, 70, 0.1);
  --rc-pressed: rgba(29, 71, 70, 0.12);
  --rc-selected: rgba(29, 71, 70, 0.08);
  --rc-disabled-opacity: 0.5;

  /* ========== CHAT-SPECIFIC ========== */
  --rc-unread-badge: #EC9E2A;
  --rc-unread-badge-text: #1F4847;
  --rc-mention-bg: #FEF3E2;
  --rc-mention-border: #EC9E2A;
  --rc-mention-text: #1F4847;
  --rc-active-channel: rgba(255, 255, 255, 0.15);
  --rc-own-message-bg: #E8F4F3;
  --rc-system-message: #5C7A79;
  --rc-typing-indicator: #5C7A79;
  
  /* Status */
  --rc-status-online: #2E7D32;
  --rc-status-away: #ED6C02;
  --rc-status-busy: #D32F2F;
  --rc-status-offline: #9E9E9E;

  /* ========== SHADOWS ========== */
  --rc-shadow-xs: 0 1px 2px rgba(31, 72, 71, 0.05);
  --rc-shadow-sm: 0 1px 3px rgba(31, 72, 71, 0.08), 0 1px 2px rgba(31, 72, 71, 0.06);
  --rc-shadow-md: 0 4px 6px rgba(31, 72, 71, 0.08), 0 2px 4px rgba(31, 72, 71, 0.06);
  --rc-shadow-lg: 0 10px 15px rgba(31, 72, 71, 0.08), 0 4px 6px rgba(31, 72, 71, 0.05);
  --rc-shadow-xl: 0 20px 25px rgba(31, 72, 71, 0.1), 0 10px 10px rgba(31, 72, 71, 0.04);

  /* ========== TYPOGRAPHY ========== */
  --rc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --rc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Consolas", 
                  "Liberation Mono", "Menlo", monospace;

  /* Font Sizes */
  --rc-text-xs: 0.75rem;
  --rc-text-sm: 0.8125rem;
  --rc-text-base: 0.9375rem;
  --rc-text-lg: 1.0625rem;
  --rc-text-xl: 1.25rem;
  --rc-text-2xl: 1.5rem;
  --rc-text-3xl: 1.875rem;

  /* Line Heights */
  --rc-leading-none: 1;
  --rc-leading-tight: 1.25;
  --rc-leading-snug: 1.375;
  --rc-leading-normal: 1.5;
  --rc-leading-relaxed: 1.625;

  /* Font Weights */
  --rc-font-normal: 400;
  --rc-font-medium: 500;
  --rc-font-semibold: 600;
  --rc-font-bold: 700;

  /* Letter Spacing */
  --rc-tracking-tight: -0.01em;
  --rc-tracking-normal: 0;
  --rc-tracking-wide: 0.02em;

  /* ========== SPACING ========== */
  --rc-space-0: 0;
  --rc-space-px: 1px;
  --rc-space-0-5: 0.125rem;
  --rc-space-1: 0.25rem;
  --rc-space-1-5: 0.375rem;
  --rc-space-2: 0.5rem;
  --rc-space-2-5: 0.625rem;
  --rc-space-3: 0.75rem;
  --rc-space-4: 1rem;
  --rc-space-5: 1.25rem;
  --rc-space-6: 1.5rem;
  --rc-space-8: 2rem;
  --rc-space-10: 2.5rem;
  --rc-space-12: 3rem;
  --rc-space-16: 4rem;

  /* ========== BORDER RADIUS ========== */
  --rc-radius-none: 0;
  --rc-radius-sm: 4px;
  --rc-radius-md: 8px;
  --rc-radius-lg: 12px;
  --rc-radius-xl: 16px;
  --rc-radius-full: 9999px;
  --rc-radius-pill: 9999px;

  /* ========== LAYOUT ========== */
  --rc-sidebar-width: 260px;
  --rc-sidebar-width-collapsed: 72px;
  --rc-right-panel-width: 300px;
  --rc-header-height: 52px;
  --rc-composer-min-height: 56px;
  --rc-message-max-width: 65ch;
  
  /* Avatars */
  --rc-avatar-xs: 20px;
  --rc-avatar-sm: 28px;
  --rc-avatar-md: 36px;
  --rc-avatar-lg: 48px;
  --rc-avatar-xl: 64px;

  /* ========== Z-INDEX ========== */
  --rc-z-dropdown: 100;
  --rc-z-sticky: 200;
  --rc-z-fixed: 300;
  --rc-z-modal-backdrop: 400;
  --rc-z-modal: 500;
  --rc-z-popover: 600;
  --rc-z-tooltip: 700;
  --rc-z-toast: 800;

  /* ========== TRANSITIONS ========== */
  --rc-transition-fast: 150ms ease;
  --rc-transition-base: 200ms ease;
  --rc-transition-slow: 300ms ease;

  /* ========== INDIGENOUS ACCENT ========== */
  --rc-accent-pattern: linear-gradient(
    90deg,
    #EC9E2A 0%, #EC9E2A 20%,
    #D8CBA8 20%, #D8CBA8 25%,
    #1D4746 25%, #1D4746 50%,
    #D8CBA8 50%, #D8CBA8 55%,
    #EC9E2A 55%, #EC9E2A 75%,
    #D8CBA8 75%, #D8CBA8 80%,
    #1D4746 80%, #1D4746 100%
  );

  --rc-accent-pattern-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='4' viewBox='0 0 80 4'%3E%3Crect x='0' width='16' height='4' fill='%23EC9E2A'/%3E%3Crect x='16' width='4' height='4' fill='%23D8CBA8'/%3E%3Crect x='20' width='20' height='4' fill='%231D4746'/%3E%3Crect x='40' width='4' height='4' fill='%23D8CBA8'/%3E%3Crect x='44' width='16' height='4' fill='%23EC9E2A'/%3E%3Crect x='60' width='4' height='4' fill='%23D8CBA8'/%3E%3Crect x='64' width='16' height='4' fill='%231D4746'/%3E%3C/svg%3E");
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  --rc-primary: #3A7A78;
  --rc-primary-hover: #4A8A88;
  --rc-primary-active: #5A9A98;
  --rc-primary-subtle: #1A2E2D;
  
  --rc-secondary: #F4B04A;
  --rc-secondary-hover: #F6BD65;
  --rc-secondary-active: #F8CA80;
  --rc-secondary-subtle: #3D321A;

  --rc-accent: #4A4740;
  --rc-accent-subtle: #3A3835;

  --rc-bg: #121212;
  --rc-surface: #1E1E1E;
  --rc-surface-raised: #252525;
  --rc-sidebar: #161616;
  --rc-sidebar-hover: #252525;
  --rc-sidebar-active: #303030;
  --rc-input: #2A2A2A;
  --rc-input-disabled: #1A1A1A;

  --rc-text: #E8E6E1;
  --rc-text-secondary: #C5C3BE;
  --rc-text-muted: #A0A0A0;
  --rc-text-inverse: #121212;
  --rc-text-link: #6AADAB;
  --rc-text-link-hover: #8CBDBB;
  --rc-text-on-primary: #FFFFFF;
  --rc-text-on-secondary: #121212;

  --rc-success: #4CAF50;
  --rc-success-subtle: #1B3D1E;
  --rc-success-text: #81C784;
  
  --rc-warning: #FFA726;
  --rc-warning-subtle: #3D2E1A;
  --rc-warning-text: #FFB74D;
  
  --rc-danger: #EF5350;
  --rc-danger-subtle: #3D1A1A;
  --rc-danger-text: #EF9A9A;

  --rc-info: #29B6F6;
  --rc-info-subtle: #0D3D52;
  --rc-info-text: #4FC3F7;

  --rc-border: #3A3A3A;
  --rc-border-subtle: #2A2A2A;
  --rc-border-strong: #4A4A4A;
  --rc-border-focus: #6AADAB;

  --rc-focus-ring: #F4B04A;
  --rc-focus-ring-offset: #1E1E1E;
  --rc-hover: rgba(255, 255, 255, 0.06);
  --rc-hover-strong: rgba(255, 255, 255, 0.1);
  --rc-pressed: rgba(255, 255, 255, 0.12);
  --rc-selected: rgba(255, 255, 255, 0.08);

  --rc-unread-badge: #F4B04A;
  --rc-unread-badge-text: #121212;
  --rc-mention-bg: #3D321A;
  --rc-mention-border: #F4B04A;
  --rc-mention-text: #E8E6E1;
  --rc-active-channel: rgba(255, 255, 255, 0.12);
  --rc-own-message-bg: #1A2E2D;
  --rc-system-message: #808080;
  --rc-typing-indicator: #808080;

  --rc-status-online: #4CAF50;
  --rc-status-away: #FFA726;
  --rc-status-busy: #EF5350;
  --rc-status-offline: #606060;

  --rc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --rc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --rc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --rc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --rc-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);

  --rc-accent-pattern: linear-gradient(
    90deg,
    #F4B04A 0%, #F4B04A 20%,
    #4A4740 20%, #4A4740 25%,
    #3A7A78 25%, #3A7A78 50%,
    #4A4740 50%, #4A4740 55%,
    #F4B04A 55%, #F4B04A 75%,
    #4A4740 75%, #4A4740 80%,
    #3A7A78 80%, #3A7A78 100%
  );
}

/* ==========================================================================
   SYSTEM PREFERENCE FALLBACK
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rc-primary: #3A7A78;
    --rc-primary-hover: #4A8A88;
    --rc-secondary: #F4B04A;
    --rc-secondary-hover: #F6BD65;
    --rc-bg: #121212;
    --rc-surface: #1E1E1E;
    --rc-sidebar: #161616;
    --rc-sidebar-hover: #252525;
    --rc-text: #E8E6E1;
    --rc-text-muted: #A0A0A0;
    --rc-text-inverse: #121212;
    --rc-text-link: #6AADAB;
    --rc-border: #3A3A3A;
    --rc-border-subtle: #2A2A2A;
    --rc-input: #2A2A2A;
    --rc-focus-ring: #F4B04A;
    --rc-hover: rgba(255, 255, 255, 0.06);
    --rc-unread-badge: #F4B04A;
    --rc-unread-badge-text: #121212;
    --rc-mention-bg: #3D321A;
    --rc-active-channel: rgba(255, 255, 255, 0.12);
    --rc-own-message-bg: #1A2E2D;
    --rc-system-message: #808080;
    --rc-success: #4CAF50;
    --rc-warning: #FFA726;
    --rc-danger: #EF5350;
    --rc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --rc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
}
/* ==========================================================================
   Rez-Chat - Minimal CPD Color Overrides
   ONLY override color variables, do NOT touch layout/structure
   ========================================================================== */

:root {
  /* Replace Element's green with Rez-Chat teal */
  --cpd-color-green-900: #1D4746 !important;
  --cpd-color-green-1000: #163938 !important;
  --cpd-color-green-1100: #0F2928 !important;
  --cpd-color-green-800: #245554 !important;
  --cpd-color-green-700: #2D6362 !important;
  --cpd-color-green-600: #3A7A78 !important;
  --cpd-color-green-500: #4A8A88 !important;
  --cpd-color-green-400: #6AADAB !important;
  --cpd-color-green-300: #8CBDBB !important;
  --cpd-color-green-200: #E8F4F3 !important;

  /* Accent/primary buttons - teal */
  --cpd-color-bg-accent-rest: #1D4746 !important;
  --cpd-color-bg-accent-hovered: #163938 !important;
  --cpd-color-bg-accent-pressed: #0F2928 !important;

  /* Background - subtle cream */
  --cpd-color-theme-bg: #F5F3EF !important;
  --cpd-color-bg-canvas-default: #F5F3EF !important;

  /* Focus ring - amber */
  --cpd-color-border-focused: #EC9E2A !important;
}

/* Login page accent bar */
.mx_AuthPage_modal::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #1D4746 0%, #1D4746 20%, #EC9E2A 20%, #EC9E2A 30%, #1D4746 30%, #1D4746 50%, #EC9E2A 50%, #EC9E2A 60%, #1D4746 60%, #1D4746 80%, #EC9E2A 80%, #EC9E2A 90%, #1D4746 90%, #1D4746 100%);
}