/* ============================================================
   Maple Pavers — Color Tokens
   Palette drawn from natural earth materials: clay, stone,
   terracotta and graphite. Warm, premium, grounded.
   ============================================================ */

:root {
  /* ---- Brand: Terracotta (primary / the hearth) ---- */
  --terracotta:        #b04f24; /* primary brand + actions */
  --terracotta-deep:   #90380d; /* pressed / deep tint */
  --terracotta-darker: #7f2b00; /* on-primary-fixed-variant */
  --clay:              #c47a5a; /* hover, softer bridge */
  --terracotta-100:    #ffeae3; /* container / wash */
  --terracotta-050:    #fff3ee; /* faintest wash */

  /* ---- Warm neutrals: beige / stone / taupe ---- */
  --white:        #ffffff;
  --beige-50:     #fffcf8; /* near-white surface */
  --beige-100:    #fbf7f0; /* logo field / raised surface */
  --beige-150:    #f8f0e5; /* inverse-on-surface */
  --beige-200:    #f1e9df; /* SOFT BEIGE — primary page bg */
  --beige-300:    #e9e1d7; /* sunken / variant surface */
  --beige-400:    #ddd2c4; /* hairline on beige */
  --stone:        #d8cdb7; /* decorative light stone */
  --taupe:        #a89779; /* WARM TAUPE — borders, muted */
  --taupe-deep:   #89726a; /* outline */

  /* ---- Graphite (deep contrast sections + text) ---- */
  --graphite:     #1a1a1a; /* GRAPHITE — dark sections */
  --graphite-900: #1e1b15; /* on-surface (warm black text) */
  --graphite-800: #2a2723; /* raised dark surface */
  --graphite-700: #343029; /* inverse-surface */
  --graphite-600: #56423b; /* on-surface-variant (muted text) */

  /* ---- Support: stone-olive tertiary (rare accents) ---- */
  --olive:        #675f25; /* tertiary */
  --olive-container: #b7ad6a;

  /* ---- Status ---- */
  --error:        #ba1a1a;
  --on-error:     #ffffff;
  --error-100:    #ffdad6;
  --success:      #4f6b3a;
  --success-100:  #e3ecd9;

  /* ============================================================
     Semantic aliases — reference these in product code.
     ============================================================ */

  /* Surfaces */
  --color-bg:               var(--beige-200);
  --color-surface:          var(--white);
  --color-surface-raised:   var(--beige-100);
  --color-surface-sunken:   var(--beige-300);
  --color-surface-inverse:  var(--graphite);

  /* Text */
  --text-strong:    var(--graphite-900);
  --text-body:      var(--graphite-900);
  --text-muted:     var(--graphite-600);
  --text-on-dark:   var(--beige-150);
  --text-on-dark-muted: #c9bbab;
  --text-on-primary:var(--white);
  --text-brand:     var(--terracotta);

  /* Primary action */
  --color-primary:        var(--terracotta);
  --color-primary-hover:  var(--clay);
  --color-primary-active: var(--terracotta-deep);
  --color-on-primary:     var(--white);
  --color-primary-wash:   var(--terracotta-100);

  /* Borders & dividers */
  --border-subtle:  var(--beige-400);
  --border-default: var(--taupe);
  --border-strong:  var(--graphite-900);
  --border-focus:   var(--terracotta);
  --border-on-dark: rgba(248, 240, 229, 0.18);

  /* Overlays on photography (warm-night legibility) */
  --overlay-soft:   linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,0.55) 100%); /* @kind other */
  --overlay-even:   rgba(26, 26, 26, 0.45); /* @kind color */
  --overlay-hero:   linear-gradient(90deg, rgba(26,26,26,0.78) 0%, rgba(26,26,26,0.35) 55%, rgba(26,26,26,0.1) 100%); /* @kind other */
}