/* ============================================================
   DESTINITO — COLOR TOKENS
   Three colours do all the work. Resist adding more.
   Navy carries structure, White carries space, Orange is the spark.
   ============================================================ */
:root {
  /* ---- Brand core (the only three brand colours) ---- */
  --navy:        #003366;  /* primary — headings, body, dark surfaces, wordmark letters */
  --orange:      #FF7F0E;  /* accent — CTAs, highlights, the signature "o", QR/scan */
  --white:       #FFFFFF;  /* light surfaces, reverse-out type */

  /* ---- Navy tints (structural greys derived from navy, NOT new hues) ---- */
  --navy-900:    #002247;  /* deepest — pressed dark surfaces */
  --navy-800:    #003366;  /* = --navy */
  --navy-700:    #14477a;  /* hover on navy fills */
  --navy-600:    #2b5c8f;
  --navy-400:    #6d88a8;  /* muted navy text on light */
  --navy-200:    #b9c7d6;  /* borders on light */
  --navy-100:    #dbe3ec;  /* hairlines, dividers */
  --navy-050:    #eef2f7;  /* tinted surface / hover row */

  /* ---- Orange states ---- */
  --orange-hover:  #ea7207;  /* CTA hover — slightly darker */
  --orange-press:  #cf6403;  /* CTA active */
  --orange-050:    #fff3e6;  /* faint orange wash — badges, highlights on light */
  --orange-100:    #ffe2c2;

  /* ---- Neutrals for B2B / documents ---- */
  --ink:         #2A2A2A;  /* B2B body text (dark grey per guideline) */
  --ink-muted:   #5c5c5c;  /* secondary B2B text */
  --grey-100:    #f4f4f4;  /* neutral surface */
  --grey-200:    #e6e6e6;  /* neutral border */

  /* ---- Functional (used sparingly, only where UI status is required) ---- */
  --success:     #1f8a54;
  --warning:     #b8860b;
  --danger:      #c0392b;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Text */
  --text-strong:   var(--navy);       /* headings, primary text */
  --text-body:     var(--navy);       /* consumer body copy */
  --text-body-b2b: var(--ink);        /* B2B / document body copy */
  --text-muted:    var(--navy-400);
  --text-on-navy:  var(--white);
  --text-on-orange:var(--navy);       /* body text on orange must be navy */
  --text-accent:   var(--orange);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-tinted:  var(--navy-050);
  --surface-dark:    var(--navy);     /* navy hero / dark chrome */
  --surface-dark-2:  var(--navy-900);
  --surface-accent:  var(--orange);   /* marketing/hero fills ONLY */

  /* Lines */
  --border:        var(--navy-100);
  --border-strong: var(--navy-200);
  --border-dark:   var(--navy-700);   /* dividers on dark surfaces */

  /* Interactive / CTA */
  --cta-bg:         var(--orange);
  --cta-bg-hover:   var(--orange-hover);
  --cta-bg-press:   var(--orange-press);
  --cta-text:       var(--white);
  --focus-ring:     var(--orange);

  /* Brand */
  --brand-navy:    var(--navy);
  --brand-orange:  var(--orange);
}