/* ── Mon Expert DSI · Color tokens ──────────────────────────────────────
   Premium metallic identity: deep petrol-navy grounds, brushed-steel
   neutrals, with gold + orange as the warm "expertise" accents.
   Base brand swatches (from the brand mark):
     #134361  petrol navy   #25628a  steel blue
     #f98652  orange        #f8d036  gold
     #ece7e8  pearl         #383838  graphite
------------------------------------------------------------------------ */
:root {
  /* Petrol / steel-blue ramp (brand #134361 / #25628a) */
  --petrol-950: #071a28;
  --petrol-900: #0c2c41;
  --petrol-800: #103851;
  --petrol-700: #134361; /* BRAND — petrol navy */
  --petrol-600: #1a5279;
  --petrol-500: #25628a; /* BRAND — steel blue */
  --petrol-400: #4a82a8;
  --petrol-300: #7ba6c4;
  --petrol-200: #b2cbdd;
  --petrol-100: #dce8f0;
  --petrol-50:  #eef4f8;

  /* ── Accent · Orange (brand #f98652) ───────────────────────────── */
  --orange-700: #c85a2c;
  --orange-600: #ec6f3c;
  --orange-500: #f98652; /* BRAND — orange */
  --orange-400: #fb9d72;
  --orange-300: #fcb79a;
  --orange-200: #fdd7c4;
  --orange-100: #feeae0;

  /* ── Accent · Gold (brand #f8d036) ─────────────────────────────── */
  --gold-700: #c79a12;
  --gold-600: #e3b51f;
  --gold-500: #f8d036; /* BRAND — gold */
  --gold-400: #fadc63;
  --gold-300: #fce793;
  --gold-200: #fdf1c2;
  --gold-100: #fef8e0;

  /* ── Neutral · Graphite + Pearl (brand #383838 / #ece7e8) ──────── */
  --graphite-950: #1a1a1b;
  --graphite-900: #242425;
  --graphite-800: #2f2f30;
  --graphite-700: #383838; /* BRAND — graphite */
  --graphite-600: #565657;
  --graphite-500: #757576;
  --graphite-400: #9a9a9b;
  --graphite-300: #c2bfc0;
  --graphite-200: #dcd8d9;
  --graphite-100: #ece7e8; /* BRAND — pearl */
  --graphite-50:  #f6f3f4;
  --white: #ffffff;

  /* ── Metallic · brushed-steel gradients (signature premium cue) ── */
  --metal-silver: linear-gradient(150deg, #f2f4f6 0%, #c4ccd2 28%, #8b969e 52%, #d4dade 74%, #9aa4ab 100%); /* @kind color */
  --metal-steel:  linear-gradient(160deg, #d8e0e6 0%, #95a3ad 40%, #5d6b75 70%, #aab6be 100%); /* @kind color */
  --metal-gold:   linear-gradient(150deg, #fdf0b8 0%, #f8d036 32%, #c79114 64%, #f6dc6b 100%); /* @kind color */
  --metal-copper: linear-gradient(150deg, #fcd2ad 0%, #f98652 34%, #b8502a 68%, #f7a072 100%); /* @kind color */
  --metal-navy:   linear-gradient(165deg, #1c4d6e 0%, #103851 46%, #071a28 100%); /* @kind color */
}

/* ── Semantic aliases ─────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --surface-canvas:    var(--graphite-50);   /* app background (light) */
  --surface-card:      var(--white);
  --surface-sunken:    var(--graphite-100);
  --surface-inverse:   var(--petrol-700);    /* dark premium panels */
  --surface-inverse-2: var(--petrol-950);
  --surface-overlay:   rgba(7, 26, 40, 0.55);

  /* Text */
  --text-strong:   var(--graphite-900);
  --text-body:     var(--graphite-700);
  --text-muted:    var(--graphite-500);
  --text-subtle:   var(--graphite-400);
  --text-on-dark:  var(--graphite-50);
  --text-on-dark-muted: var(--petrol-200);
  --text-link:     var(--petrol-500);

  /* Brand roles */
  --brand-primary:    var(--petrol-700);
  --brand-secondary:  var(--petrol-500);
  --brand-accent:     var(--orange-500);
  --brand-highlight:  var(--gold-500);

  /* Borders & lines */
  --border-subtle:  var(--graphite-200);
  --border-default: var(--graphite-300);
  --border-strong:  var(--graphite-400);
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --hairline:       rgba(7, 26, 40, 0.08);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(37, 98, 138, 0.35);

  /* Status / semantic */
  --success-500: #2f8f5b;
  --success-100: #e2f2e9;
  --warning-500: var(--gold-600);
  --warning-100: var(--gold-100);
  --danger-500:  #cf4434;
  --danger-100:  #fbe5e2;
  --info-500:    var(--petrol-500);
  --info-100:    var(--petrol-100);
}