/* ================= */
/* CORE COLOR TOKENS */
/* ================= */

:root {

  /* BLACK & WHITE */
  --color-black: #000000;
  --color-white: #ffffff;

  /* ─── Red ─── */
  --color-red-25:  #fff5f5;
  --color-red-50:  #ffe5e5;
  --color-red-100: #ffcccc;
  --color-red-200: #ff9999;
  --color-red-300: #ff6666;
  --color-red-400: #ff3333;
  --color-red-500: #ff0000;
  --color-red-600: #e50000;
  --color-red-700: #cc0000;
  --color-red-800: #990000;
  --color-red-900: #660000;
  --color-red-950: #330000;
  --color-red-975: #1a0000;

  /* ─── Blue ─── */
  --color-blue-25:  #f0f0ff;
  --color-blue-50:  #e5e5ff;
  --color-blue-100: #ccccff;
  --color-blue-200: #9999ff;
  --color-blue-300: #6666ff;
  --color-blue-400: #3333ff;
  --color-blue-500: #0000ff;
  --color-blue-600: #0000e5;
  --color-blue-700: #0000cc;
  --color-blue-800: #000099;
  --color-blue-900: #000066;
  --color-blue-950: #000033;
  --color-blue-975: #00001a;

  /* ─── Cyan ─── */
  --color-cyan-25:  #f0fcff;
  --color-cyan-50:  #e5f9ff;
  --color-cyan-100: #ccf4ff;
  --color-cyan-200: #99e9ff;
  --color-cyan-300: #66deff;
  --color-cyan-400: #33d3ff;
  --color-cyan-500: #00c8ff;
  --color-cyan-600: #00b4e5;
  --color-cyan-700: #00a0cc;
  --color-cyan-800: #007899;
  --color-cyan-900: #005066;
  --color-cyan-950: #002833;
  --color-cyan-975: #00141a;

  /* ─── Gray ─── */
  --color-gray-25:  #fafafa;
  --color-gray-50:  #f7f7f7;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e6e6e6;
  --color-gray-300: #cccccc;
  --color-gray-400: #b3b3b3;
  --color-gray-500: #999999;
  --color-gray-600: #808080;
  --color-gray-700: #666666;
  --color-gray-800: #4d4d4d;
  --color-gray-900: #333333;
  --color-gray-950: #1a1a1a;
  --color-gray-975: #0d0d0d; 

  /* ─── Green ─── */
  --color-green-25:  #f0fff0;
  --color-green-50:  #e5ffe5;
  --color-green-100: #ccffcc;
  --color-green-200: #99ff99;
  --color-green-300: #66ff66;
  --color-green-400: #33ff33;
  --color-green-500: #00ff00;
  --color-green-600: #00e500;
  --color-green-700: #00c200;
  --color-green-800: #009900;
  --color-green-900: #006600;
  --color-green-950: #003300;
  --color-green-975: #001a00;

  /* ─── Magenta ─── */
  --color-magenta-25:  #fff5ff;
  --color-magenta-50:  #fff0ff;
  --color-magenta-100: #ffe5ff;
  --color-magenta-200: #ffccff;
  --color-magenta-300: #ff99ff;
  --color-magenta-400: #ff66ff;
  --color-magenta-500: #ff33ff;
  --color-magenta-600: #e500e5;
  --color-magenta-700: #cc00cc;
  --color-magenta-800: #990099;
  --color-magenta-900: #660066;
  --color-magenta-950: #330033;
  --color-magenta-975: #1a001a;

  /* ─── Yellow ─── */
  --color-yellow-25:  #fffdf0;
  --color-yellow-50:  #fffbe5;
  --color-yellow-100: #fff7cc;
  --color-yellow-200: #ffef99;
  --color-yellow-300: #ffe766;
  --color-yellow-400: #ffdf33;
  --color-yellow-500: #ffd700;
  --color-yellow-600: #e5c100;
  --color-yellow-700: #ccac00;
  --color-yellow-800: #998100;
  --color-yellow-900: #665600;
  --color-yellow-950: #332b00;
  --color-yellow-975: #1a1600;
}

/* =============== */
/* SEMANTIC COLORS */
/* =============== */

:root {

  /* ─── Text ─── */
  --color-text-default:     var(--color-gray-950);
  --color-text-secondary:   var(--color-gray-800);
  --color-text-placeholder: var(--color-gray-500);
  --color-text-disabled:    var(--color-gray-400);
  --color-text-suggestion:  var(--color-magenta-800);
  --color-text-on-color:    var(--color-white);

  /* ─── Focus ─── */
  --color-focus-light: var(--color-cyan-700);
  --color-focus-dark:  var(--color-cyan-500);

  /* ─── Background ─── */
  --color-bg-default:  var(--color-white);
  --color-bg-subtle:  var(--color-gray-25); 
  --color-bg-secondary:  var(--color-gray-100); 
  --color-bg-disabled: var(--color-gray-200);

  /* ─── Border ─── */
  --color-border-default:     var(--color-gray-200);
  --color-border-louder:      var(--color-gray-400);
  --color-border-information: var(--color-cyan-800);
  --color-border-success:     var(--color-green-800);
  --color-border-warning:     var(--color-yellow-500);
  --color-border-danger:      var(--color-red-500);
  --color-border-suggestion:  var(--color-magenta-800);

  /* ─── Icon ─── */
  --color-icon-default:     var(--color-gray-800);
  --color-icon-quiet:       var(--color-gray-700);
  --color-icon-information: var(--color-cyan-800);
  --color-icon-success:     var(--color-green-800);
  --color-icon-warning:     var(--color-black);
  --color-icon-danger:      var(--color-red-500);
  --color-icon-suggestion:  var(--color-magenta-800);

  /* ─── Focus ─── */
  --color-focus-light: var(--color-cyan-700);
  --color-focus-dark:  var(--color-cyan-500);
}

/* ========================= */
/* COMPONENT-SPECIFIC COLORS */
/* ========================= */

:root {
/* ─────── */
/* Buttons */
/* ─────── */

/* ─── Primary ─── */
--color-button-base-bg-primary: var(--color-gray-950);
--color-button-base-border-primary: var(--color-gray-950);
--color-button-base-text-primary: var(--color-text-on-color);

--color-button-hover-bg-primary: var(--color-blue-500);
--color-button-hover-border-primary: var(--color-blue-500);
--color-button-hover-text-primary: var(--color-text-on-color);

/* ─── Secondary ─── */
--color-button-base-bg-secondary: var(--color-bg-default);
--color-button-base-border-secondary: var(--color-blue-500);
--color-button-base-text-secondary: var(--color-text-primary);

--color-button-hover-bg-secondary: var(--color-blue-25);
--color-button-hover-border-secondary: var(--color-blue-500);
--color-button-hover-text-secondary: var(--color-blue-500);

/* ─────── */
/* Alerts */
/* ─────── */
--color-alert-bg: var(--color-yellow-500);

}