/* VisaTier — Color tokens
   Source of truth: Figma "Colors" frame (node 687:75008).
   A refined immigration / golden-visa / real-estate palette:
   warm cream, deep navy, terracotta rust, and gold. */

:root {
  /* ---- Primary · Terracotta / Rust ---- */
  --primary: #8f2c0b;            /* rgb(143,44,11) */
  --primary-hover: #a62b02;      /* rgb(166,43,2)  — darker/redder on hover */
  --primary-50: rgba(143, 44, 11, 0.5);
  --primary-20: rgba(143, 44, 11, 0.2);
  --primary-15: rgba(143, 44, 11, 0.15);
  --primary-10: rgba(143, 44, 11, 0.1);
  --primary-5:  rgba(143, 44, 11, 0.05);

  /* ---- Secondary · Gold ---- */
  --secondary: #b78b30;          /* rgb(183,139,48) */
  --secondary-hover: #a17a26;

  /* ---- Beige / Cream (the canvas color of the brand) ---- */
  --beige-100: #f4f0e7;          /* rgb(244,240,231) */
  --beige-80:  rgba(244, 240, 231, 0.8);
  --beige-60:  rgba(244, 240, 231, 0.6);
  --beige-50:  rgba(244, 240, 231, 0.5);
  --beige-30:  rgba(244, 240, 231, 0.3);
  --beige-10:  rgba(244, 240, 231, 0.1);

  /* ---- Dark blue · Navy ---- */
  --navy-100: #071130;           /* rgb(7,17,48) */
  --navy-hover: #061543;         /* rgb(6,21,67) */
  --navy-80: rgba(7, 17, 48, 0.8);
  --navy-60: rgba(7, 17, 48, 0.6);
  --navy-50: rgba(7, 17, 48, 0.5);
  --navy-20: rgba(7, 17, 48, 0.2);
  --navy-15: rgba(7, 17, 48, 0.15);
  --navy-5:  rgba(7, 17, 48, 0.05);

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --white-50: rgba(255, 255, 255, 0.5);
  --white-10: rgba(255, 255, 255, 0.1);
  --black: #000000;

  /* ---- System / semantic ---- */
  --success: #63b726;            /* "Correct" — rgb(99,183,38) */
  --error:   #ce2727;            /* "False"   — rgb(206,39,39) */
  --star:    #e7aa2a;            /* rating star fill */

  /* ============ Semantic aliases ============ */
  --surface-page:    var(--beige-100);  /* default page canvas */
  --surface-card:    var(--white);
  --surface-dark:    var(--navy-100);   /* dark sections, footer */
  --surface-accent:  var(--primary);

  --text-heading:    var(--navy-100);
  --text-body:       var(--navy-80);
  --text-muted:      var(--navy-50);
  --text-on-dark:    var(--beige-100);
  --text-on-primary: var(--beige-100);
  --text-link:       var(--primary);
  --text-gold:       var(--secondary);

  --border-subtle:   var(--navy-15);
  --border-input:    var(--primary-50);
  --border-strong:   var(--primary);

  --focus-ring:      var(--primary);
}