/* ══════════════════════════════════════════════════════════════
   Aura Design System v2.0 — "Premium Tech Minimalist"
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;900&display=swap');

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #FFFFFF;
  --bg-alt:        #f3f3f3;
  --surface:       #FFFFFF;

  /* Text */
  --text:          rgb(61, 61, 61);
  --text-heading:  rgb(61, 61, 61);
  --text-body:     rgba(61, 61, 61, 0.75);
  --text-muted:    rgba(61, 61, 61, 0.55);

  /* Accents */
  --accent:        #000000;
  --accent-soft:   #121212;

  /* Borders */
  --border:        rgba(61, 61, 61, 0.12);
  --border-strong: rgba(61, 61, 61, 0.25);
  --border-subtle: rgba(61, 61, 61, 0.08);

  /* Links */
  --link:          rgba(18, 18, 18, 0.85);

  /* Functional (admin badges) */
  --fn-success-bg: #2d2d2d;
  --fn-error-bg:   #f3f3f3;
  --fn-warning-bg: #f3f3f3;
  --fn-admin-bg:   #000000;

  /* Chat */
  --chat-user-bg:    #f3f3f3;
  --chat-user-text:  rgb(61, 61, 61);
  --chat-agent-bg:   #000000;
  --chat-agent-text: #FFFFFF;

  /* Sidebar */
  --sidebar-bg:    #000000;
  --sidebar-text:  #FFFFFF;
  --sidebar-muted: #dddddd;
  --sidebar-width: 220px;

  /* Footer */
  --footer-bg:     #000000;
  --footer-text:   #dddddd;
  --footer-link:   #FFFFFF;

  /* Radii */
  --radius-btn:    6px;
  --radius-input:  0px;
  --radius-card:   0px;
  --radius-modal:  0px;
  --radius-badge:  0px;
  --radius-bubble: 6px;

  /* Typography */
  --font:          'Manrope', sans-serif;
  --text-base:     17.25px;
  --line-height:   1.7;
  --letter-sm:     0.69px;
  --letter-md:     1.15px;

  /* Transitions */
  --transition:    0.3s ease;

  /* Max width */
  --max-w:         130rem;

  /* ── Legacy aliases (JS references) ── */
  --purple:        #000000;
  --purple-light:  #f3f3f3;
  --purple-border: rgba(61, 61, 61, 0.12);
  --gold:          #121212;
  --gold-light:    #f3f3f3;
  --white:         #FFFFFF;
  --muted:         rgba(61, 61, 61, 0.55);
  --red:           #2d2d2d;
  --red-light:     #f3f3f3;
  --green:         #2d2d2d;
  --green-light:   #f3f3f3;
  --blue:          #2d2d2d;
  --blue-light:    #f3f3f3;
  --yellow:        #2d2d2d;
  --yellow-light:  #f3f3f3;
  --send:          #000000;
  --send-h:        #121212;
  --aura-bg:       #f3f3f3;
  --aura-dot:      #000000;
  --user-bg:       #f3f3f3;
  --user-text:     rgb(61, 61, 61);
  --error:         #2d2d2d;

  /* Theme utilities */
  --text-on-accent: #FFFFFF;
  --overlay:        rgba(0, 0, 0, 0.5);
}

/* ── Dark theme ──────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:            #121212;
  --bg-alt:        #1e1e1e;
  --surface:       #1e1e1e;

  --text:          #e0e0e0;
  --text-heading:  #f0f0f0;
  --text-body:     rgba(224, 224, 224, 0.85);
  --text-muted:    rgba(224, 224, 224, 0.55);

  --accent:        #333333;
  --accent-soft:   #444444;

  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-subtle: rgba(255, 255, 255, 0.08);

  --link:          rgba(224, 224, 224, 0.85);

  --fn-success-bg: #2d2d2d;
  --fn-error-bg:   #2a2a2a;
  --fn-warning-bg: #2a2a2a;
  --fn-admin-bg:   #333333;

  --chat-user-bg:    #2a2a2a;
  --chat-user-text:  #e0e0e0;
  --chat-agent-bg:   #333333;
  --chat-agent-text: #f0f0f0;

  --sidebar-bg:    #0a0a0a;
  --sidebar-text:  #ffffff;
  --sidebar-muted: #aaaaaa;

  --footer-bg:     #0a0a0a;
  --footer-text:   #aaaaaa;
  --footer-link:   #ffffff;

  --text-on-accent: #FFFFFF;
  --overlay:        rgba(0, 0, 0, 0.7);

  /* Legacy aliases */
  --purple:        #333333;
  --purple-light:  #1e1e1e;
  --purple-border: rgba(255, 255, 255, 0.12);
  --gold:          #444444;
  --gold-light:    #1e1e1e;
  --white:         #1e1e1e;
  --muted:         rgba(224, 224, 224, 0.55);
  --red:           #cf6679;
  --red-light:     #2a2a2a;
  --green:         #81c784;
  --green-light:   #2a2a2a;
  --blue:          #82b1ff;
  --blue-light:    #2a2a2a;
  --yellow:        #ffd54f;
  --yellow-light:  #2a2a2a;
  --send:          #333333;
  --send-h:        #444444;
  --aura-bg:       #1e1e1e;
  --aura-dot:      #e0e0e0;
  --user-bg:       #2a2a2a;
  --user-text:     #e0e0e0;
  --error:         #cf6679;
}

/* ── 2. Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── 3. Base typography ───────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.6px;
}

h2 { font-size: 30px; }

a {
  color: var(--link);
  text-decoration: none;
  transition: opacity var(--transition);
}
a:hover { opacity: 0.85; }

img { max-width: 100%; display: block; }

/* ── 4. Labels ────────────────────────────────────────────── */
label {
  display: block;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--letter-sm);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── 5. Inputs ────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 10px 16px;
  height: 45px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}