/* =========================================
   Brand & Theme Tokens (no component rules)
   ========================================= */

/* Default to dark until JS sets a choice */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand */
  --brand-primary: #313988;   /* indigo */
  --brand-accent:  #1DC5EF;   /* cyan */

  /* Scales (dark base) */
  --indigo-950: #121433;
  --indigo-900: #181b3f;
  --indigo-800: #202455;
  --indigo-700: #28306f;
  --indigo-600: #313988;      /* base */
  --indigo-500: #4951a8;
  --indigo-400: #6a73c0;
  --indigo-200: #cdd1f1;
  --indigo-100: #e8eaf9;

  --cyan-700: #149fc1;
  --cyan-600: #1DC5EF;        /* base */
  --cyan-500: #4fd2f3;
  --cyan-200: #c9f2fd;
  --cyan-100: #e9fbff;

  --ink-900: #0b0e1e;
  --ink-800: #0f1326;
  --ink-700: #131833;
  --ink-500: #aab0c6;
  --ink-400: #c5c9d9;
  --ink-300: #d7dbeb;

  /* Feedback */
  --error-bg: #2a1420;
  --error-br: #dd4a68;
  --error-fg: #ffd8e1;

  --info-bg:  rgba(29,197,239,0.12);
  --info-br:  rgba(29,197,239,0.45);
  --info-fg:  #c9f2fd;

  /* Shadows */
  --shadow-1: 0 6px 24px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.18);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.2);

  /* Mapped tokens used by styles.css */
  --bg-body:        linear-gradient(180deg, var(--ink-800), var(--indigo-900));
  --bg-body-deco1:  radial-gradient(1200px 800px at 80% -10%, rgba(29,197,239,0.12), transparent 60%);
  --bg-body-deco2:  radial-gradient(900px 600px at -10% 20%, rgba(49,57,136,0.18), transparent 55%);
  --text-color:     var(--indigo-100);
  --link-color:     var(--cyan-500);
  --card-bg:        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)), linear-gradient(180deg, var(--indigo-900), var(--indigo-800));
  --card-br:        rgba(73,81,168,0.45);
  --input-bg:       linear-gradient(180deg, var(--ink-700), var(--indigo-900));
  --input-bg-focus: linear-gradient(180deg, var(--ink-700), var(--indigo-800));
  --input-br:       rgba(105,115,200,0.35);
  --topbar-bg:      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --topbar-br:      rgba(29,197,239,0.35);

  --btn-primary-fg: #04131a;
  --btn-primary-bg: linear-gradient(180deg, var(--cyan-500), var(--brand-accent));
  --btn-secondary-fg: var(--indigo-100);
  --btn-secondary-bg: linear-gradient(180deg, var(--indigo-800), var(--indigo-900));
  --btn-secondary-br: rgba(73,81,168,0.45);
}

/* Light theme overrides */
:root[data-theme="light"]{
  color-scheme: light;

  /* Keep brand */
  --brand-primary: #313988;
  --brand-accent:  #1DC5EF;

  /* Light neutrals */
  --ink-900: #0f1229;
  --ink-800: #1b2150;
  --ink-700: #2a3170;
  --ink-500: #5a6296;
  --ink-400: #7a82b8;
  --ink-300: #9aa2d3;

  /* Map overrides for light */
  --bg-body:        linear-gradient(180deg, #f6f8ff, #eef2ff);
  --bg-body-deco1:  radial-gradient(800px 600px at 85% -10%, rgba(29,197,239,0.16), transparent 60%);
  --bg-body-deco2:  radial-gradient(700px 500px at -10% 20%, rgba(49,57,136,0.12), transparent 55%);
  --text-color:     #0f1229;
  --link-color:     #0e92b1;
  --card-bg:        #ffffff;
  --card-br:        rgba(49,57,136,0.18);
  --input-bg:       #f8f9ff;
  --input-bg-focus: #f4f6ff;
  --input-br:       rgba(49,57,136,0.28);
  --topbar-bg:      #ffffffcc;
  --topbar-br:      rgba(49,57,136,0.22);

  --btn-primary-fg: #ffffff;
  --btn-primary-bg: linear-gradient(180deg, #4951a8, #313988);
  --btn-secondary-fg: #1b2150;
  --btn-secondary-bg: linear-gradient(180deg, #f7f8ff, #eef1ff);
  --btn-secondary-br: rgba(49,57,136,0.25);

  --error-bg: #ffe8ee;
  --error-br: #e0536f;
  --error-fg: #6f1023;

  --info-bg:  rgba(29,197,239,0.10);
  --info-br:  rgba(29,197,239,0.35);
  --info-fg:  #0b4757;

  --shadow-1: 0 4px 16px rgba(49,57,136,0.12);
  --shadow-2: 0 8px 28px rgba(49,57,136,0.16);
}