/* ==========================================================================
   Colors — Viver My Way
   Brand palette (source hex):
     #FD8408  orange   (primary)
     #F2B68A  peach    (secondary / warm tint)
     #064264  deep sea (ink accent / dark)
     #E5E6E4  mist     (neutral surface)
     #2B2B2B  charcoal (text)
   State variants derived in oklch to stay in-family.
   ========================================================================== */
:root {
  /* ---- Brand scales ---- */
  --orange-50:  #fff4e8;
  --orange-100: #ffe6cc;
  --orange-200: #fdd0a3;
  --orange-300: #fcb46b;
  --orange-400: #fd9a3a;
  --orange-500: #fd8408;   /* BRAND primary */
  --orange-600: #e07103;
  --orange-700: #b85c05;
  --orange-800: #8f470a;

  --peach-100: #fbe6d5;
  --peach-200: #f7d0b3;
  --peach-300: #f2b68a;    /* BRAND peach */
  --peach-400: #e79a63;

  --sea-400:  #1a6a94;
  --sea-500:  #0d5480;
  --sea-600:  #064264;     /* BRAND deep sea */
  --sea-700:  #063852;
  --sea-800:  #052a3e;

  --mist-100: #f4f5f3;
  --mist-200: #e5e6e4;     /* BRAND mist */
  --mist-300: #d3d5d0;
  --mist-400: #b4b7b1;

  --charcoal:  #2b2b2b;    /* BRAND charcoal */
  --ink-700:   #444444;
  --ink-500:   #6b6b6b;
  --ink-400:   #8a8a8a;
  --white:     #ffffff;

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

  --color-accent:         var(--sea-600);
  --color-accent-hover:   var(--sea-500);
  --color-accent-active:  var(--sea-700);
  --color-on-accent:      var(--white);

  --color-secondary:      var(--peach-300);
  --color-secondary-soft: var(--peach-100);

  /* surfaces */
  --surface-page:    var(--mist-100);
  --surface-card:    var(--white);
  --surface-sunken:  var(--mist-200);
  --surface-inverse: var(--sea-600);

  /* text */
  --text-heading:   var(--charcoal);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--white);
  --text-on-tint:   var(--sea-600);
  --text-link:      var(--orange-600);

  /* borders */
  --border-subtle:  var(--mist-200);
  --border-default: var(--mist-300);
  --border-strong:  var(--mist-400);

  /* semantic status */
  --color-success: #2f9e5f;
  --color-success-soft: #e3f4ea;
  --color-warning: #e8a413;
  --color-warning-soft: #fdf1d6;
  --color-danger:  #d9463b;
  --color-danger-soft:  #fbe5e3;
  --color-info:    var(--sea-500);
  --color-info-soft: #e2eef5;

  /* focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--orange-500) 40%, transparent);
}