/* ============================================================
   Flametec — Color tokens
   A warm, premium industrial palette: cast-iron ink, ash & stone
   neutrals, and a controlled ember accent. Fire is used sparingly
   — as a mark of heat, not decoration.
   ============================================================ */
:root {
  /* —— Iron: warm charcoal neutral ramp (soot → ash → stone) —— */
  --iron-950: #14110f;
  --iron-900: #1c1815;
  --iron-800: #2a2420;
  --iron-700: #3d352f;
  --iron-600: #574c44;
  --iron-500: #75685e;
  --iron-400: #9a8c80;
  --iron-300: #bcafa3;
  --iron-200: #d8cec4;
  --iron-100: #eae3da;
  --iron-50:  #f5f0ea;
  --iron-25:  #faf7f2;
  --white:    #ffffff;

  /* —— Ember: the brand fire (primary accent) · Pantone 166 C —— */
  --ember-800: #7c2c07;
  --ember-700: #a23806;
  --ember-600: #c44406;
  --ember-500: #e35205; /* primary · Pantone 166 C */
  --ember-400: #ec6a22;
  --ember-300: #f28a4c;
  --ember-200: #f7af82;
  --ember-100: #fbd2bb;
  --ember-50:  #fdede2;

  /* —— Amber: secondary warm highlight (heat glow, hover sheen) —— */
  --amber-600: #b07c10;
  --amber-500: #e09a1e;
  --amber-300: #f0c263;
  --amber-100: #f8e7bb;

  /* —— Functional —— */
  --green-600: #2f6b41;
  --green-500: #3e7c4f;
  --green-100: #dcebdf;
  --red-600:   #a8322a;
  --red-500:   #c0362b;
  --red-100:   #f4dad6;
  --steel-600: #3f5563;
  --steel-500: #547185;
  --steel-100: #dde6ec;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Text */
  --text-strong:  var(--iron-950);
  --text-body:    var(--iron-700);
  --text-muted:   var(--iron-500);
  --text-faint:   var(--iron-400);
  --text-inverse: var(--iron-25);
  --text-brand:   var(--ember-600);
  --text-on-brand: var(--white);

  /* Surfaces */
  --surface-page:     var(--iron-25);
  --surface-card:     var(--white);
  --surface-sunken:   var(--iron-50);
  --surface-raised:   var(--white);
  --surface-ink:      var(--iron-950);
  --surface-ink-soft: var(--iron-900);
  --surface-ember:    var(--ember-50);

  /* Borders / hairlines */
  --border-subtle:  var(--iron-100);
  --border-default: var(--iron-200);
  --border-strong:  var(--iron-300);
  --border-ink:     var(--iron-800);

  /* Brand actions */
  --brand-primary:        var(--ember-500);
  --brand-primary-hover:  var(--ember-600);
  --brand-primary-active: var(--ember-700);
  --brand-on:             var(--white);
  --brand-ring:           color-mix(in srgb, var(--ember-500) 35%, transparent);

  /* Status */
  --status-success: var(--green-500);
  --status-success-surface: var(--green-100);
  --status-danger:  var(--red-500);
  --status-danger-surface: var(--red-100);
  --status-info:    var(--steel-500);
  --status-info-surface: var(--steel-100);
  --status-warning: var(--amber-500);
  --status-warning-surface: var(--amber-100);

  /* Focus */
  --focus-ring: var(--ember-500);
}