/* ─────────────────────────────────────────────
   Bhāṣā — Design Tokens
   All colour/type values live here.
   Never reference hex directly in component CSS.
───────────────────────────────────────────── */

/* ── Shared (theme-independent) ── */
:root {
  --flag-red:   #CC0000;
  --flag-amber: #FFCE00;
  --flag-black: #141414;

  /* typography */
  --font-size-xs:  10px;
  --font-size-sm:  12px;
  --font-size-md:  14px;
  --font-size-lg:  16px;
  --font-size-xl:  20px;
  --font-size-2xl: 32px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:   1.3;
  --line-height-normal:  1.55;
  --line-height-relaxed: 1.7;

  /* spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* transitions */
  --transition-fast:   120ms ease;
  --transition-normal: 240ms ease;
  --transition-slow:   420ms ease;
}

/* ── German — Dark (primary) ── */
html.theme-de[data-theme="dark"] {
  --color-bg:   #090909;
  --color-bg-2: #111111;
  --color-bg-3: #1a1a1a;

  --color-border:   rgba(255, 255, 255, 0.07);
  --color-border-2: rgba(255, 255, 255, 0.13);

  --color-text:   #f0f0f0;
  --color-text-2: #8a8a8a;
  --color-text-3: #505050;

  --color-bubble-user:    #1e1e1e;
  --color-bubble-tutor:   #161616;
  --color-bubble-de-text: var(--flag-amber);

  --color-mic-ring-1: var(--flag-red);
  --color-mic-ring-2: var(--flag-amber);
  --color-mic-ring-3: #2c2c2c;

  --color-wave-start: var(--flag-red);
  --color-wave-mid:   var(--flag-amber);
  --color-wave-end:   #2c2c2c;

  --color-accent:      var(--flag-red);
  --color-accent-mute: rgba(204, 0, 0, 0.18);
  --color-accent-text: #ffffff;

  --color-input-bg:     #181818;
  --color-input-border: rgba(255, 255, 255, 0.11);
  --color-input-focus:  rgba(204, 0, 0, 0.45);
  --color-input-text:   #f0f0f0;
  --color-input-placeholder: #444444;

  --color-btn-primary-bg:   var(--flag-red);
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-bg: #1e1e1e;
  --color-btn-secondary-text: #f0f0f0;
  --color-btn-secondary-border: rgba(255, 255, 255, 0.12);

  --color-toast-bg:   #1e1e1e;
  --color-toast-text: #f0f0f0;
  --color-toast-border: rgba(255, 255, 255, 0.10);

  --color-overlay:  rgba(0, 0, 0, 0.72);
  --color-card-bg:  #111111;
  --color-card-border: rgba(255, 255, 255, 0.07);

  --color-toggle-track-off: #333333;
  --color-toggle-track-on:  var(--flag-red);
  --color-toggle-thumb:     #ffffff;

  --color-dot-inactive: #333333;
  --color-dot-active:   var(--flag-red);

  --color-disabled-text: #3a3a3a;
  --color-disabled-icon: #2e2e2e;
}

/* ── German — Light ── */
html.theme-de[data-theme="light"] {
  --color-bg:   #f4f4f4;
  --color-bg-2: #ffffff;
  --color-bg-3: #ebebeb;

  --color-border:   rgba(0, 0, 0, 0.08);
  --color-border-2: rgba(0, 0, 0, 0.14);

  --color-text:   #141414;
  --color-text-2: #555555;
  --color-text-3: #999999;

  --color-bubble-user:    #e4e4e4;
  --color-bubble-tutor:   #efefef;
  --color-bubble-de-text: #8a5c00;

  --color-mic-ring-1: var(--flag-red);
  --color-mic-ring-2: #b8920a;
  --color-mic-ring-3: #cccccc;

  --color-wave-start: var(--flag-red);
  --color-wave-mid:   #b8920a;
  --color-wave-end:   #cccccc;

  --color-accent:      var(--flag-red);
  --color-accent-mute: rgba(204, 0, 0, 0.10);
  --color-accent-text: #ffffff;

  --color-input-bg:     #ffffff;
  --color-input-border: rgba(0, 0, 0, 0.14);
  --color-input-focus:  rgba(204, 0, 0, 0.35);
  --color-input-text:   #141414;
  --color-input-placeholder: #aaaaaa;

  --color-btn-primary-bg:   var(--flag-red);
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-text: #141414;
  --color-btn-secondary-border: rgba(0, 0, 0, 0.14);

  --color-toast-bg:     #ffffff;
  --color-toast-text:   #141414;
  --color-toast-border: rgba(0, 0, 0, 0.10);

  --color-overlay:  rgba(0, 0, 0, 0.45);
  --color-card-bg:  #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.07);

  --color-toggle-track-off: #cccccc;
  --color-toggle-track-on:  var(--flag-red);
  --color-toggle-thumb:     #ffffff;

  --color-dot-inactive: #cccccc;
  --color-dot-active:   var(--flag-red);

  --color-disabled-text: #cccccc;
  --color-disabled-icon: #dddddd;
}

/* ── Auto — respects OS preference ── */
@media (prefers-color-scheme: dark) {
  html.theme-de[data-theme="auto"] {
    --color-bg:   #090909;
    --color-bg-2: #111111;
    --color-bg-3: #1a1a1a;
    --color-border:   rgba(255, 255, 255, 0.07);
    --color-border-2: rgba(255, 255, 255, 0.13);
    --color-text:   #f0f0f0;
    --color-text-2: #8a8a8a;
    --color-text-3: #505050;
    --color-bubble-user:    #1e1e1e;
    --color-bubble-tutor:   #161616;
    --color-bubble-de-text: var(--flag-amber);
    --color-mic-ring-1: var(--flag-red);
    --color-mic-ring-2: var(--flag-amber);
    --color-mic-ring-3: #2c2c2c;
    --color-wave-start: var(--flag-red);
    --color-wave-mid:   var(--flag-amber);
    --color-wave-end:   #2c2c2c;
    --color-accent:      var(--flag-red);
    --color-accent-mute: rgba(204, 0, 0, 0.18);
    --color-accent-text: #ffffff;
    --color-input-bg:     #181818;
    --color-input-border: rgba(255, 255, 255, 0.11);
    --color-input-focus:  rgba(204, 0, 0, 0.45);
    --color-input-text:   #f0f0f0;
    --color-input-placeholder: #444444;
    --color-btn-primary-bg:   var(--flag-red);
    --color-btn-primary-text: #ffffff;
    --color-btn-secondary-bg: #1e1e1e;
    --color-btn-secondary-text: #f0f0f0;
    --color-btn-secondary-border: rgba(255, 255, 255, 0.12);
    --color-toast-bg:   #1e1e1e;
    --color-toast-text: #f0f0f0;
    --color-toast-border: rgba(255, 255, 255, 0.10);
    --color-overlay:  rgba(0, 0, 0, 0.72);
    --color-card-bg:  #111111;
    --color-card-border: rgba(255, 255, 255, 0.07);
    --color-toggle-track-off: #333333;
    --color-toggle-track-on:  var(--flag-red);
    --color-toggle-thumb:     #ffffff;
    --color-dot-inactive: #333333;
    --color-dot-active:   var(--flag-red);
    --color-disabled-text: #3a3a3a;
    --color-disabled-icon: #2e2e2e;
  }
}

@media (prefers-color-scheme: light) {
  html.theme-de[data-theme="auto"] {
    --color-bg:   #f4f4f4;
    --color-bg-2: #ffffff;
    --color-bg-3: #ebebeb;
    --color-border:   rgba(0, 0, 0, 0.08);
    --color-border-2: rgba(0, 0, 0, 0.14);
    --color-text:   #141414;
    --color-text-2: #555555;
    --color-text-3: #999999;
    --color-bubble-user:    #e4e4e4;
    --color-bubble-tutor:   #efefef;
    --color-bubble-de-text: #8a5c00;
    --color-mic-ring-1: var(--flag-red);
    --color-mic-ring-2: #b8920a;
    --color-mic-ring-3: #cccccc;
    --color-wave-start: var(--flag-red);
    --color-wave-mid:   #b8920a;
    --color-wave-end:   #cccccc;
    --color-accent:      var(--flag-red);
    --color-accent-mute: rgba(204, 0, 0, 0.10);
    --color-accent-text: #ffffff;
    --color-input-bg:     #ffffff;
    --color-input-border: rgba(0, 0, 0, 0.14);
    --color-input-focus:  rgba(204, 0, 0, 0.35);
    --color-input-text:   #141414;
    --color-input-placeholder: #aaaaaa;
    --color-btn-primary-bg:   var(--flag-red);
    --color-btn-primary-text: #ffffff;
    --color-btn-secondary-bg: #ffffff;
    --color-btn-secondary-text: #141414;
    --color-btn-secondary-border: rgba(0, 0, 0, 0.14);
    --color-toast-bg:     #ffffff;
    --color-toast-text:   #141414;
    --color-toast-border: rgba(0, 0, 0, 0.10);
    --color-overlay:  rgba(0, 0, 0, 0.45);
    --color-card-bg:  #ffffff;
    --color-card-border: rgba(0, 0, 0, 0.07);
    --color-toggle-track-off: #cccccc;
    --color-toggle-track-on:  var(--flag-red);
    --color-toggle-thumb:     #ffffff;
    --color-dot-inactive: #cccccc;
    --color-dot-active:   var(--flag-red);
    --color-disabled-text: #cccccc;
    --color-disabled-icon: #dddddd;
  }
}