/* ==========================================================================
   ClashBot AI — Design Tokens
   The single source of truth for colour, type, spacing, radius and elevation.
   Change a value here and it updates everywhere, in both themes.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;   /* primary action */
  --brand-700: #4338ca;
  --brand-800: #3730a3;

  /* --- Neutrals --------------------------------------------------------- */
  --grey-50:  #f8fafc;
  --grey-100: #f1f5f9;
  --grey-200: #e2e8f0;
  --grey-300: #cbd5e1;
  --grey-400: #94a3b8;
  --grey-500: #64748b;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1e293b;
  --grey-900: #0f172a;
  --grey-950: #020617;

  /* --- Status ----------------------------------------------------------- */
  --success:     #16a34a;
  --success-bg:  #dcfce7;
  --warning:     #d97706;
  --warning-bg:  #fef3c7;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --info:        #0284c7;
  --info-bg:     #e0f2fe;

  /* --- Semantic surfaces (light theme) ---------------------------------- */
  --bg:            var(--grey-50);
  --surface:       #ffffff;
  --surface-alt:   var(--grey-50);
  --surface-hover: var(--grey-100);
  --sidebar-bg:    #ffffff;

  --text:          var(--grey-900);
  --text-muted:    var(--grey-500);
  --text-subtle:   var(--grey-400);
  --text-invert:   #ffffff;

  --border:        var(--grey-200);
  --border-strong: var(--grey-300);

  --accent:        var(--brand-600);
  --accent-hover:  var(--brand-700);
  --accent-soft:   var(--brand-50);
  --focus-ring:    color-mix(in srgb, var(--brand-500) 45%, transparent);
  --console-bg:    #0b1020;
  --switch-off:    var(--grey-300);
  --switch-knob:   #ffffff;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas,
               "Liberation Mono", Menlo, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px — dashboard body size */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --leading-tight: 1.25;
  --leading-body:  1.6;

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w:          248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h:           60px;
  --content-max:        1280px;

  /* --- Motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration:   160ms;
  --duration-s: 100ms;
}

/* ==========================================================================
   Dark theme — only the semantic tokens are redefined, never the raw palette.
   Applies on an explicit [data-theme="dark"] choice, or by system preference
   when the user has not chosen light.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg:            #000000;
  --surface:       #0a0a0a;
  --surface-alt:   #121212;
  --surface-hover: #1c1c1c;
  --sidebar-bg:    #000000;

  --text:          #f4f4f5;
  --text-muted:    #a1a1aa;
  --text-subtle:   #71717a;

  --border:        #1f1f22;
  --border-strong: #2f2f34;

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-400);
  --accent-soft:   rgba(99, 102, 241, 0.16);

  --console-bg:    #000000;
  --switch-off:    #3f3f46;
  --switch-knob:   #d4d4d8;

  --success-bg:    rgba(22, 163, 74, 0.18);
  --warning-bg:    rgba(217, 119, 6, 0.18);
  --danger-bg:     rgba(220, 38, 38, 0.18);
  --info-bg:       rgba(2, 132, 199, 0.18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.8);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.85);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.95);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #000000;
    --surface:       #0a0a0a;
    --surface-alt:   #121212;
    --surface-hover: #1c1c1c;
    --sidebar-bg:    #000000;

    --text:          #f4f4f5;
    --text-muted:    #a1a1aa;
    --text-subtle:   #71717a;

    --border:        #1f1f22;
    --border-strong: #2f2f34;

    --accent:        var(--brand-500);
    --accent-hover:  var(--brand-400);
    --accent-soft:   rgba(99, 102, 241, 0.16);

    --console-bg:    #000000;
    --switch-off:    #3f3f46;
    --switch-knob:   #d4d4d8;

    --success-bg:    rgba(22, 163, 74, 0.18);
    --warning-bg:    rgba(217, 119, 6, 0.18);
    --danger-bg:     rgba(220, 38, 38, 0.18);
    --info-bg:       rgba(2, 132, 199, 0.18);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.8);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.85);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.95);
  }
}