/* ============================================================
   Sabatak — Color Tokens
   Earthy, warm palette: brown-forward primary, sandy accent,
   deep purple-black for depth.
   ============================================================ */

:root {
  /* ---- Brand base ---- */
  --brand-1: #BCA68E;   /* sandy tan/beige — accent, highlights */
  --brand-2: #312A3D;   /* deep dark purple — dark surfaces, depth */
  --brand-3: #8A6338;   /* warm brown — PRIMARY, hero backgrounds */
  --black:   #000000;
  --white:   #FFFFFF;

  /* ---- Brand tints / shades (oklch-harmonized off the base) ---- */
  --brand-3-700: #6E4E32;  /* deeper brown (Corporate tier border) */
  --brand-3-300: #B88556;  /* lighter warm brown (gradient glow) */
  --brand-1-200: #E7DCCE;  /* pale sand wash */
  --brand-2-700: #211C29;  /* near-black purple */
  --brand-2-300: #4A3473;  /* dark purple (Growth tier border) */

  /* ---- Pricing tier accents ---- */
  --tier-corporate: #6E4E32; /* warm brown */
  --tier-growth:    #4A3473; /* dark purple */
  --tier-starter:   #2C4721; /* forest green */

  /* ---- Neutral ramp (warm-gray, biased toward the sand) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF7F3;
  --neutral-100: #F3EDE5;
  --neutral-200: #E7DCCE;
  --neutral-300: #D2C3AF;
  --neutral-400: #A99478;
  --neutral-500: #7E6B52;
  --neutral-600: #574936;
  --neutral-700: #3A3027;
  --neutral-800: #221C18;
  --neutral-900: #120F0C;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--brand-3);
  --color-primary-hover:  var(--brand-3-700);
  --color-accent:         var(--brand-1);
  --color-depth:          var(--brand-2);

  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-muted:   var(--neutral-50);
  --surface-hero:    var(--brand-3);   /* warm brown hero */
  --surface-dark:    var(--brand-2);   /* deep purple section */
  --surface-inverse: var(--brand-2-700);

  --text-strong:   var(--black);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-on-dark:  var(--white);
  --text-on-brand: var(--white);
  --text-accent:   var(--brand-3);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);

  /* ---- Status ---- */
  --success: #2C4721;
  --warning: #B88556;
  --danger:  #8A3A2E;
  --info:    #4A3473;
}