/**
 * SCBL — Color Tokens
 *
 * Source of truth: Figma "SCBL" (node 2:41).
 * Three brand ramps (Dark, IndigoVelvet, HarvestOrange) plus base solids.
 * Semantic tokens at the bottom map roles to ramp steps — change roles here,
 * not in block CSS.
 */

:root {
  /* ─── Base ─────────────────────────────────────────────────────────── */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ─── Dark (neutral / text / surface) ──────────────────────────────── */
  --color-dark-50:  #f1f2f4;
  --color-dark-100: #e3e4e8;
  --color-dark-200: #c7cad1;
  --color-dark-300: #abafba;
  --color-dark-400: #8f94a3;
  --color-dark-500: #737a8c;
  --color-dark-600: #5c6170;
  --color-dark-700: #454954;
  --color-dark-800: #2e3138;
  --color-dark-900: #17181c;
  --color-dark-950: #101114;

  /* ─── IndigoVelvet (purple) ────────────────────────────────────────── */
  --color-indigo-50:  #f1ebf9;
  --color-indigo-100: #e4d8f3;
  --color-indigo-200: #c8b0e8;
  --color-indigo-300: #ad89dc;
  --color-indigo-400: #9262d0;
  --color-indigo-500: #763bc4;
  --color-indigo-600: #5f2f9d;
  --color-indigo-700: #472376;
  --color-indigo-800: #2f174f;
  --color-indigo-900: #180c27;
  --color-indigo-950: #11081b;

  /* ─── HarvestOrange (brand) ────────────────────────────────────────── */
  --color-orange-50:  #ffede5;
  --color-orange-100: #ffdbcc;
  --color-orange-200: #ffb899;
  --color-orange-300: #ff9466;
  --color-orange-400: #ff7033;
  --color-orange-500: #ff4d00;
  --color-orange-600: #cc3d00;
  --color-orange-700: #992e00;
  --color-orange-800: #661f00;
  --color-orange-900: #330f00;
  --color-orange-950: #240b00;

  /* ─── Semantic roles ───────────────────────────────────────────────── */
  --color-primary:        var(--color-orange-500);
  --color-primary-hover:  var(--color-orange-600);
  --color-primary-active: var(--color-orange-700);

  --color-secondary:        var(--color-indigo-500);
  --color-secondary-hover:  var(--color-indigo-600);
  --color-secondary-active: var(--color-indigo-700);

  --color-text:         var(--color-dark-950);
  --color-text-muted:   var(--color-dark-500);
  --color-text-subtle:  var(--color-dark-400);
  --color-text-inverse: var(--color-white);

  --color-surface:        var(--color-white);
  --color-surface-alt:    var(--color-dark-50);
  --color-surface-strong: var(--color-dark-900);

  --color-border:        var(--color-dark-100);
  --color-border-strong: var(--color-dark-200);

  --color-link:          var(--color-orange-500);
  --color-link-hover:    var(--color-orange-600);

  /* Social */
  --color-instagram-action: #3b79ff;
  --color-instagram-action-hover: #2f67df;
}