/* ============================================================
   Tierra Firme — Color Tokens
   Earthy, rustic-but-professional. Built from the two brand
   constants (clay orange + stone charcoal) extended into a
   warm, grounded earth palette.
   ============================================================ */

:root {
  /* ---- Brand constants (from the logo) ---- */
  --clay-500: #f58634;   /* brand orange — rgb(245,134,52) */
  --stone-600: #535353;  /* brand charcoal — rgb(83,83,83)  */

  /* ---- Clay (primary accent) ramp ---- */
  --clay-50:  #fdf2e8;
  --clay-100: #fbe1c9;
  --clay-200: #f8c79a;
  --clay-300: #f7ac6b;
  --clay-400: #f6953f;
  --clay-500: #f58634;
  --clay-600: #dc6f22;
  --clay-700: #b5571a;
  --clay-800: #8c4317;
  --clay-900: #6b3514;

  /* ---- Stone (warm neutral) ramp — slightly warm grays ---- */
  --stone-50:  #f6f4f1;
  --stone-100: #e9e5e0;
  --stone-200: #d3cdc4;
  --stone-300: #b3aca1;
  --stone-400: #8a8379;
  --stone-500: #6a645c;
  --stone-600: #535353;
  --stone-700: #403f3d;
  --stone-800: #2d2c2a;
  --stone-900: #1d1c1b;

  /* ---- Sand (paper / warm backgrounds) ---- */
  --sand-50:  #faf6ef;
  --sand-100: #f3ebdd;
  --sand-200: #e9dcc8;
  --sand-300: #ddcab0;
  --sand-400: #cdb491;

  /* ---- Earth accents (use sparingly) ---- */
  --terracotta: #b5542e;  /* burnt clay — deep accent */
  --ochre:      #c99a3f;  /* dried-grass gold */
  --olive:      #7b7a4f;  /* faded olive */
  --moss:       #5e6b43;  /* muted green */
  --espresso:   #4a3527;  /* roasted brown */

  /* ---- Functional / semantic hues (earth-tuned) ---- */
  --success-600: #5e6b43; /* moss */
  --success-50:  #eef0e6;
  --warning-600: #c99a3f; /* ochre */
  --warning-50:  #faf1da;
  --danger-600:  #a83a2a; /* brick red */
  --danger-50:   #f8e6e2;
  --info-600:    #4f6a72; /* slate teal */
  --info-50:     #e6eef0;

  /* ============================================================
     Semantic aliases — reference these in components, not the
     raw ramp values above.
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--sand-50);   /* default app/page bg */
  --surface-raised:  #ffffff;          /* cards sitting on page */
  --surface-sunken:  var(--sand-100);  /* wells, insets */
  --surface-inverse: var(--stone-800); /* dark sections */
  --surface-brand:   var(--clay-500);

  /* Text */
  --text-strong:   var(--stone-900);  /* headings */
  --text-body:     var(--stone-700);  /* default copy */
  --text-muted:    var(--stone-500);  /* secondary / captions */
  --text-faint:    var(--stone-400);  /* placeholders, disabled */
  --text-on-brand: #ffffff;
  --text-on-dark:  var(--sand-100);
  --text-link:     var(--clay-700);

  /* Borders / dividers */
  --border-subtle:   var(--stone-200);
  --border-default:  var(--stone-300);
  --border-strong:   var(--stone-400);
  --border-brand:    var(--clay-500);
  --border-on-dark:  rgba(255, 255, 255, 0.16);

  /* Interactive (primary = clay) */
  --action-bg:          var(--clay-500);
  --action-bg-hover:    var(--clay-600);
  --action-bg-active:   var(--clay-700);
  --action-fg:          #ffffff;
  --action-ring:        rgba(245, 134, 52, 0.40);

  /* Interactive (neutral = stone) */
  --action-neutral-bg:        var(--stone-700);
  --action-neutral-bg-hover:  var(--stone-800);
  --action-neutral-bg-active: var(--stone-900);

  /* Focus */
  --focus-ring: var(--clay-500);
}