/* ============================================================
   H-BOX — COLOR TOKENS
   Brand source (Charte Graphique H-Box):
     Rouge orangé   #ED5A42
     Gris anthracite #4A4A4A
     Blanc cassé    #FDFCFB
   Base palette + harmonious tints/shades + semantic aliases.
   ============================================================ */

:root {
  /* ---- Brand: Rouge orangé (hexagon / hachures) ---- */
  --brand-50:  #FDEEEB;
  --brand-100: #FBDAD3;
  --brand-200: #F7B6A9;
  --brand-300: #F2937F;
  --brand-400: #F07561;
  --brand-500: #ED5A42; /* CANONICAL brand red-orange */
  --brand-600: #D8442C;
  --brand-700: #B5331F;
  --brand-800: #8A2718;
  --brand-900: #5E1A10;

  /* ---- Ink: Gris anthracite neutral scale ---- */
  --ink-950: #161616; /* near-black */
  --ink-900: #1F1F1F; /* deepest dark surface */
  --ink-800: #2A2A2A; /* dark surface — logo background */
  --ink-700: #3A3A3A;
  --ink-600: #4A4A4A; /* CANONICAL anthracite */
  --ink-500: #6B6B6B;
  --ink-400: #8C8C8C;
  --ink-300: #B3B3B3;
  --ink-200: #D8D6D3;
  --ink-150: #E5E2DF;
  --ink-100: #EFEDEA;
  --ink-50:  #F6F4F1;

  /* ---- Blanc cassé (paper / base canvas) ---- */
  --paper:   #FDFCFB; /* CANONICAL off-white */
  --paper-2: #F7F5F2; /* tinted paper for alternating sections */
  --white:   #FFFFFF;

  /* ---- Semantic status (muted, professional) ---- */
  --success-100: #DCF1E7;
  --success-500: #2E9E6B;
  --success-700: #1E6E49;
  --warning-100: #FBEDD2;
  --warning-500: #E2982E;
  --warning-700: #9E6610;
  --info-100:    #DCE9F4;
  --info-500:    #3E7CB1;
  --info-700:    #28567C;
  --danger-100:  #FBDED7;
  --danger-500:  #CE3A2A;
  --danger-700:  #8E2014;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Surfaces */
  --surface-canvas:    var(--paper);
  --surface-canvas-alt: var(--paper-2);
  --surface-card:      var(--white);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--ink-50);
  --surface-inverse:   var(--ink-900);
  --surface-inverse-2: var(--ink-800);
  --surface-brand:     var(--brand-500);
  --surface-brand-soft: var(--brand-50);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-subtle:    var(--ink-400);
  --text-on-brand:  var(--paper);
  --text-on-dark:   var(--paper);
  --text-on-dark-muted: var(--ink-300);
  --text-brand:     var(--brand-600);
  --text-link:      var(--brand-600);

  /* Borders & dividers */
  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--brand-500);
  --border-on-dark: rgba(255,255,255,0.14);

  /* Interactive brand states */
  --action-brand:        var(--brand-500);
  --action-brand-hover:  var(--brand-600);
  --action-brand-active: var(--brand-700);
  --action-brand-soft:        var(--brand-50);
  --action-brand-soft-hover:  var(--brand-100);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--brand-500) 45%, transparent);
}