/* ============================================================
   Natya Hotel & Resort — Color Tokens
   Brand DNA: cobalt blue (#1C5FA7) + tropical sunset orange
   (#EE7F31), grounded on warm ivory sand. Affordable luxury.
   ============================================================ */
:root {
  /* ---------- Brand · Cobalt Blue ---------- */
  --blue-50:  #eef4fb;
  --blue-100: #d6e4f4;
  --blue-200: #aecaea;
  --blue-300: #7da9db;
  --blue-400: #4a83c6;
  --blue-500: #2a6db4;
  --blue-600: #1c5fa7;   /* ★ Brand blue — logo monogram */
  --blue-700: #184f8a;
  --blue-800: #163f6d;
  --blue-900: #122f50;   /* deep navy — footers, overlays */
  --blue-950: #0c2138;

  /* ---------- Brand · Sunset Orange ---------- */
  --orange-50:  #fdf3ec;
  --orange-100: #fbe1cd;
  --orange-200: #f7c39c;
  --orange-300: #f3a268;
  --orange-400: #f08d45;
  --orange-500: #ee7f31;  /* ★ Brand orange — logo tagline */
  --orange-600: #d96a1f;
  --orange-700: #b4541a;
  --orange-800: #8f4319;
  --orange-900: #743818;

  /* ---------- Warm Sand / Ivory neutrals ---------- */
  --sand-50:  #faf7f2;    /* page ivory */
  --sand-100: #f4efe6;
  --sand-200: #ece4d6;
  --sand-300: #ddd1bd;
  --sand-400: #c6b79c;
  --sand-500: #a89878;

  /* ---------- Stone / Ink (text + cool greys) ---------- */
  --stone-300: #cdc9c2;
  --stone-400: #9c958a;
  --stone-500: #756d61;
  --stone-600: #574f44;
  --ink-800:  #2c2f36;
  --ink-900:  #1d2026;    /* primary text — warm charcoal */
  --white:    #ffffff;
  --black:    #000000;

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

  /* Brand roles */
  --brand-primary:      var(--blue-600);
  --brand-primary-deep: var(--blue-900);
  --brand-accent:       var(--orange-500);
  --brand-accent-deep:  var(--orange-700);

  /* Surfaces */
  --surface-page:    var(--sand-50);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--sand-100);
  --surface-card:    var(--white);
  --surface-inverse: var(--blue-900);
  --surface-accent-soft: var(--orange-50);
  --surface-brand-soft:  var(--blue-50);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-faint:     var(--stone-400);
  --text-on-brand:  var(--white);
  --text-on-accent: var(--white);
  --text-inverse:   var(--sand-50);
  --text-link:      var(--blue-600);

  /* Lines & borders */
  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--blue-600);
  --border-accent:  var(--orange-500);

  /* Accent hairline (the orange rule from the logo lockup) */
  --rule-accent:    var(--orange-500);

  /* Interactive states */
  --brand-primary-hover:  var(--blue-700);
  --brand-primary-active: var(--blue-800);
  --brand-accent-hover:   var(--orange-600);
  --brand-accent-active:  var(--orange-700);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--blue-600) 45%, transparent);

  /* Status (kept close to brand temperature) */
  --success: #2f8a5b;
  --warning: var(--orange-600);
  --danger:  #c0392b;
  --info:    var(--blue-500);
}