/* Brand tokens — extracted from contect-figma-sketch.html (premium layer)
   Per project_lessrec_rebrand_2026.md decision (2026-05-10).
   Gold/charcoal premium palette for lessrec.com US rebrand.
   Source: docs/SKETCH.html lines 638-1248. */

:root {
  /* Brand */
  --color-gold:        #d9b85b;
  --color-gold-soft:   #f4d980;
  --color-gold-dark:   #9f7c24;
  --color-gold-deeper: #806016;
  --color-gold-line:   #ead995;

  /* Brand accent */
  --color-red:         #ba1730;

  /* Neutrals */
  --color-ink:         #15171b;
  --color-charcoal:    #191b1f;
  --color-charcoal-2:  #29252a;
  --color-muted:       #667080;
  --color-graphite:    #4a4f5c;

  /* Surfaces */
  --color-white:       #ffffff;
  --color-off-white:   #fafafa;
  --color-cream:       #fbf7ed;
  --color-blue:        #eef7f8;
  --color-canvas:      #e9edf2;

  /* Legacy aliases (kept for older components, will be retired) */
  --color-text:        var(--color-ink);
  --color-bg:          var(--color-white);
  --color-bg-alt:      var(--color-cream);
  --color-border:      var(--color-gold-line);
  --color-ochre-dark:  var(--color-gold-dark);
  --color-burgundy:    var(--color-red);

  /* Type */
  --font-sans:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", "Open Sans", sans-serif;

  /* Layout */
  --container-max:    1280px;
  --header-h:         92px;
  --header-h-mobile:  66px;

  /* Space */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 86px;

  /* Radii */
  --r-sm:   6px;
  --r-md:   16px;
  --r-lg:   18px;
  --r-xl:   20px;
  --r-2xl:  22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-gold:    0 14px 28px rgba(166, 123, 22, 0.24);
  --shadow-gold-sm: 0 16px 36px rgba(92, 76, 32, 0.08);
  --shadow-card:    0 18px 50px rgba(92, 76, 32, 0.09);
  --shadow-dark:    0 22px 54px rgba(25, 27, 31, 0.18);
  --shadow-dark-lg: 0 28px 80px rgba(0, 0, 0, 0.32);
  --shadow-frame:   0 30px 90px rgba(21, 25, 35, 0.22);

  /* Hero overlay */
  --hero-overlay: linear-gradient(
    90deg,
    rgba(18, 20, 24, 0.96) 0%,
    rgba(18, 20, 24, 0.88) 45%,
    rgba(18, 20, 24, 0.34) 100%
  );
  --hero-overlay-mobile: linear-gradient(
    180deg,
    rgba(18, 20, 24, 0.95) 0%,
    rgba(18, 20, 24, 0.90) 54%,
    rgba(18, 20, 24, 0.70) 100%
  );

  /* Gradients */
  --gradient-gold-button: linear-gradient(180deg, #e8cc73, #d5ae45);
  --gradient-process:     linear-gradient(135deg, #fbf7ed 0%, #ffffff 58%, #eef7f8 100%);
  --gradient-footer:      linear-gradient(90deg, #191b1f 0%, #29252a 100%);
}