/*
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *  theme.css  —  Design Token System
 *  Skonamonkey SMS-G
 *
 *  Brand palette (from logo):
 *    Tech Cyan    #38B2AC  — highlights, energy, primary CTA
 *    Deep Teal    #2C7A7B  — mid-transition, hover states
 *    Forest Green #1C4532  — grounding, stability
 *    Active Red   #E53E3E  — antenna dot, danger / destructive
 *
 *  HOW TO REBRAND (white-label):
 *    Simple:   Override tokens in :root below.
 *    DB-driven: In PHP, echo a <style> block into <head>:
 *              [data-theme="account"] { --color-primary: #xx; ... }
 *              Then set data-theme on <html> from your accounts table.
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

/* ── Brand & Accent ─────────────────────────────────────────────── */
:root {
  --color-primary:        #38B2AC;   /* Tech Cyan — primary CTA, highlights */
  --color-primary-hover:  #2C7A7B;   /* Deep Teal — hover / pressed */
  --color-primary-muted:  rgba(56, 178, 172, 0.15);
  --color-primary-text:   #ffffff;

  --color-accent-in:      #38B2AC;   /* Tech Cyan — inbound message border (prominent) */
  --color-accent-out:     #2C7A7B;   /* Deep Teal — outbound message border (receded) */

  /* ── Brand gradient (for decorative use, future theming) ───────── */
  --brand-gradient: linear-gradient(180deg, #38B2AC 0%, #2C7A7B 50%, #1C4532 100%);

  /* ── Status colours ─────────────────────────────────────────────── */
  --color-success:        #48BB78;
  --color-success-muted:  rgba(72, 187, 120, 0.15);
  --color-warning:        #DD6B20;
  --color-warning-muted:  rgba(221, 107, 32, 0.15);
  --color-danger:         #E53E3E;   /* Active Red — antenna dot */
  --color-danger-muted:   rgba(229, 62, 62, 0.15);
  --color-info:           #38B2AC;
  --color-scheduled:      #68D391;   /* Mint green — scheduled ghost bubbles */
  --color-scheduled-bg:   rgba(104, 211, 145, 0.10);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-family:   system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-xs:       0.70rem;
  --font-sm:       0.75rem;
  --font-base:     0.90rem;
  --font-md:       1.00rem;
  --font-lg:       1.20rem;
  --font-xl:       1.60rem;
  --font-weight-normal: 400;
  --font-weight-bold:   600;

  /* ── Spacing ────────────────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;

  /* ── Border radius ──────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 50%;

  /* ── Transitions ────────────────────────────────────────────────── */
  --transition: 0.2s ease;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --sidebar-width:       50px;
  --conversations-width: 300px;

  /* ── Surfaces  (dark mode = default) ────────────────────────────── */
  --surface-page:    #121212;
  --surface-header:  #1a1a1a;
  --surface-panel:   #1a1a1a;
  --surface-sidebar: #1a1a1a;   /* alias — used by phonebook sidebar */
  --surface-card:    #2a2a2a;
  --surface-raised:  #1e1e1e;
  --surface-hover:   #2a2a2a;   /* generic hover background */
  --surface-input:   #1e1e1e;
  --surface-overlay: rgba(0, 0, 0, 0.65);

  /* ── Text ───────────────────────────────────────────────────────── */
  --text-primary:   #eeeeee;
  --text-secondary: #aaaaaa;
  --text-muted:     #666666;
  --text-link:      #38B2AC;

  /* ── Borders ────────────────────────────────────────────────────── */
  --border-color:  #333333;
  --border-input:  #444444;
  --border-subtle: rgba(255, 255, 255, 0.05);

  /* ── Scrollbar ──────────────────────────────────────────────────── */
  --scrollbar-track:       #121212;
  --scrollbar-thumb:       #2a2a2a;
  --scrollbar-thumb-hover: #3a3a3a;
  --scrollbar-border:      #121212;

  /* ── Message bubbles ────────────────────────────────────────────── */
  --bubble-in-bg:    #2e2e2e;
  --bubble-out-bg:   #1a1a1a;
  --bubble-in-text:  #eeeeee;
  --bubble-out-text: #aaaaaa;

  /* ── Conversation list ──────────────────────────────────────────── */
  --conv-item-bg:       #2a2a2a;
  --conv-item-bg-hover: #3a3a3a;
  --conv-in-bg:         #2e2e2e;
  --conv-out-bg:        #222222;
  --conv-item-text:     #cccccc;
  --conv-item-name:     #eeeeee;
  --conv-item-number:   #aaaaaa;
  --conv-item-meta:     #aaaaaa;
  --conv-in-snippet:    #dddddd;
  --conv-out-snippet:   #888888;
  --conv-unread-accent: #38B2AC;   /* Tech Cyan — unread thread indicator */

  /* ── Input area ─────────────────────────────────────────────────── */
  --input-area-bg:     #1e1e1e;
  --input-area-border: #333333;

  /* ── Dropdown / autocomplete ────────────────────────────────────── */
  --dropdown-bg:         #2a2a2a;
  --dropdown-text:       #ffffff;
  --dropdown-border:     #444444;
  --dropdown-item-hover: #444444;

  /* ── Recipient tokens ───────────────────────────────────────────── */
  --token-bg:           #2a2a2a;
  --token-text:         #ffffff;
  --token-remove:       #cccccc;
  --token-remove-hover: #ffffff;

  /* ── Device selector ────────────────────────────────────────────── */
  --select-bg:     #1e1e1e;
  --select-text:   #eeeeee;
  --select-border: #444444;
}

/* ── Light Mode Overrides ───────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* Primary shifts to Deep Teal — better contrast on white (WCAG AA) */
    --color-primary:        #2C7A7B;
    --color-primary-hover:  #1C4532;   /* Forest Green */
    --color-primary-muted:  rgba(44, 122, 123, 0.12);

    --color-accent-in:      #38B2AC;
    --color-accent-out:     #2C7A7B;

    --color-success:        #276749;
    --color-success-muted:  rgba(39, 103, 73, 0.12);
    --color-info:           #2C7A7B;
    --color-scheduled:      #276749;
    --color-scheduled-bg:   rgba(39, 103, 73, 0.10);

    --text-link:            #2C7A7B;
    --conv-unread-accent:   #2C7A7B;

    --surface-page:    #f5f5f5;
    --surface-header:  #eaeaea;
    --surface-panel:   #f0f0f0;
    --surface-sidebar: #f0f0f0;
    --surface-card:    #ffffff;
    --surface-raised:  #f9f9f9;
    --surface-hover:   #e9e9e9;
    --surface-input:   #ffffff;
    --surface-overlay: rgba(0, 0, 0, 0.35);

    --text-primary:   #222222;
    --text-secondary: #555555;
    --text-muted:     #999999;

    --border-color:  #cccccc;
    --border-input:  #cccccc;
    --border-subtle: rgba(0, 0, 0, 0.06);

    --scrollbar-track:       #f5f5f5;
    --scrollbar-thumb:       #cccccc;
    --scrollbar-thumb-hover: #aaaaaa;
    --scrollbar-border:      #f5f5f5;

    --bubble-in-bg:    #e4e4e4;
    --bubble-out-bg:   #f8f8f8;
    --bubble-in-text:  #111111;
    --bubble-out-text: #777777;

    --conv-item-bg:       #f5f5f5;
    --conv-item-bg-hover: #e9e9e9;
    --conv-in-bg:         #ebebeb;
    --conv-out-bg:        #fafafa;
    --conv-item-text:     #333333;
    --conv-item-name:     #111111;
    --conv-item-number:   #666666;
    --conv-item-meta:     #666666;
    --conv-in-snippet:    #222222;
    --conv-out-snippet:   #999999;

    --input-area-bg:     #f9f9f9;
    --input-area-border: #cccccc;

    --dropdown-bg:         #ffffff;
    --dropdown-text:       #111111;
    --dropdown-border:     #cccccc;
    --dropdown-item-hover: #f0f0f0;

    --token-bg:           #e0e0e0;
    --token-text:         #111111;
    --token-remove:       #666666;
    --token-remove-hover: #111111;

    --select-bg:     #ffffff;
    --select-text:   #111111;
    --select-border: #cccccc;
  }
}
