/* ============================================================
   Compradores / KPEG — Color tokens
   Brand palette (exact, from brand guidelines):
     AZUL       #041E37   DEEP BLUE  #152534   CINZA   #38342F
     OFF WHITE  #D3CDC1   BRANCO     #FFF9F8
     MARROM     #C3A377   BEGE       #D8C4AA
   Navy-forward premium real-estate system with warm camel accents.
   ============================================================ */

:root {
  /* ---- Named brand colors (verbatim) ---- */
  --azul:      #041E37;  /* deepest navy — primary dark */
  --deep-blue: #152534;  /* navy — primary action */
  --cinza:     #38342F;  /* warm charcoal */
  --off-white: #D3CDC1;  /* warm greige */
  --branco:    #FFF9F8;  /* warm white — page */
  --marrom:    #C3A377;  /* camel — the K mark / accent */
  --bege:      #D8C4AA;  /* light camel */

  /* ---- Navy scale (built around AZUL / DEEP BLUE) ---- */
  --navy-950: #02131F;
  --navy-900: #041E37;  /* AZUL */
  --navy-800: #0B2235;
  --navy-700: #152534;  /* DEEP BLUE */
  --navy-600: #20364A;
  --navy-500: #2F4A63;
  --navy-400: #4C6884;
  --navy-300: #7D96AD;
  --navy-200: #B4C2D1;
  --navy-100: #DBE2EA;
  --navy-50:  #EEF2F6;

  /* ---- Marrom / camel scale (around MARROM, BEGE) ---- */
  --marrom-50:  #F8F2E9;
  --marrom-100: #F0E5D3;
  --marrom-200: #E4D2B7;
  --marrom-300: #D8C4AA;  /* BEGE */
  --marrom-400: #CDB28C;
  --marrom-500: #C3A377;  /* MARROM — brand accent */
  --marrom-600: #A8895E;
  --marrom-700: #8A6F49;
  --marrom-800: #6B5638;
  --marrom-900: #4A3B27;

  /* ---- Warm neutral / sand scale (BRANCO → CINZA) ---- */
  --sand-50:  #FFF9F8;  /* BRANCO */
  --sand-100: #F6F1EA;
  --sand-200: #EAE3D7;
  --sand-300: #D3CDC1;  /* OFF WHITE */
  --sand-400: #B5AD9D;
  --sand-500: #918878;
  --sand-600: #6C6356;
  --sand-700: #4D473D;
  --sand-800: #38342F;  /* CINZA */
  --sand-900: #26231F;

  --white: #FFFFFF;

  /* ---- Semantics (muted, warm to suit the palette) ---- */
  --success-700: #2F5742;
  --success-500: #3F7256;
  --success-100: #DEEAE2;
  --warning-700: #8A5E1F;
  --warning-500: #B5832F;
  --warning-100: #F1E6CD;
  --danger-700:  #84392C;
  --danger-500:  #A94B3B;
  --danger-100:  #F0DED8;
  --info-700:    #1F3C5A;
  --info-500:    #2F4A63;
  --info-100:    #DBE2EA;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --bg-page:        var(--branco);
  --bg-canvas:      var(--sand-100);
  --surface-card:   var(--white);
  --surface-sunken: var(--sand-100);
  --surface-raised: var(--white);
  --surface-hover:  var(--sand-100);
  --surface-active: var(--sand-200);
  --surface-inverse:var(--navy-900);
  --surface-dark:   var(--navy-900);
  --surface-dark-2: var(--navy-700);

  --text-strong:    var(--azul);
  --text-heading:   var(--azul);
  --text-body:      var(--cinza);
  --text-secondary: var(--sand-600);
  --text-muted:     var(--sand-500);
  --text-disabled:  var(--sand-400);
  --text-on-navy:   var(--branco);
  --text-on-marrom: var(--azul);
  --text-on-light:  var(--azul);
  --text-accent:    var(--marrom-700);
  --text-link:      var(--marrom-700);

  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-accent:  var(--marrom-500);
  --border-focus:   var(--marrom-600);
  --border-on-dark: rgba(216, 196, 170, 0.22);

  /* Brand accent */
  --brand:          var(--marrom-500);
  --brand-hover:    var(--marrom-600);
  --brand-press:    var(--marrom-700);
  --brand-tint:     var(--marrom-100);
  --brand-tint-2:   var(--marrom-50);

  /* Primary action = navy; accent action = camel */
  --action-primary-bg:    var(--deep-blue);
  --action-primary-hover: var(--navy-900);
  --action-primary-press: var(--navy-950);
  --action-primary-text:  var(--branco);
  --action-accent-bg:     var(--marrom-500);
  --action-accent-hover:  var(--marrom-600);
  --action-accent-press:  var(--marrom-700);
  --action-accent-text:   var(--azul);

  --focus-ring: color-mix(in oklch, var(--marrom-600) 50%, transparent);
}