/* ============================================================
   MAXRENTAL — Color tokens
   Source of truth: Figma Variables (primary / secondary / neutral
   10-step scales). Base ramps first, semantic aliases below.
   ============================================================ */

:root {
  /* ---- Primary · MAXRENTAL red ---- */
  --primary-50:  rgb(253, 236, 236);
  --primary-100: rgb(248, 197, 197);
  --primary-200: rgb(245, 169, 169);
  --primary-300: rgb(240, 130, 130);
  --primary-400: rgb(237, 105, 105);
  --primary-500: rgb(233, 68, 68);   /* brand red — #E94444 */
  --primary-600: rgb(212, 62, 62);
  --primary-700: rgb(165, 48, 48);
  --primary-800: rgb(128, 37, 37);
  --primary-900: rgb(98, 29, 29);

  /* ---- Secondary · ink / near-black ---- */
  --secondary-50:  rgb(233, 233, 233);
  --secondary-100: rgb(186, 186, 186);
  --secondary-200: rgb(153, 153, 153);
  --secondary-300: rgb(106, 106, 106);
  --secondary-400: rgb(77, 77, 77);
  --secondary-500: rgb(33, 33, 33);   /* #212121 */
  --secondary-600: rgb(30, 30, 30);
  --secondary-700: rgb(23, 23, 23);
  --secondary-800: rgb(18, 18, 18);
  --secondary-900: rgb(14, 14, 14);   /* near-black surface — #0E0E0E */

  /* ---- Neutral · light greys (hairlines, fills, muted text) ---- */
  --neutral-50:  rgb(254, 254, 255);
  --neutral-100: rgb(253, 253, 253);
  --neutral-200: rgb(252, 252, 253);
  --neutral-300: rgb(250, 251, 252);
  --neutral-400: rgb(249, 250, 251);
  --neutral-500: rgb(248, 249, 250);
  --neutral-600: rgb(226, 227, 228);  /* hairline / divider */
  --neutral-700: rgb(176, 177, 178);  /* muted text on dark */
  --neutral-800: rgb(136, 137, 138);
  --neutral-900: rgb(104, 105, 105);  /* muted text on light */

  /* ---- Pure values ---- */
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the ramp
     ============================================================ */

  /* Brand */
  --brand:          var(--primary-500);
  --brand-hover:    var(--primary-600);
  --brand-active:   var(--primary-700);
  --brand-soft:     var(--primary-50);

  /* Text */
  --text-primary:   var(--secondary-500);   /* headings & body on light */
  --text-secondary: rgb(77, 77, 77);        /* supporting copy on light */
  --text-muted:     var(--neutral-900);     /* captions, meta */
  --text-on-dark:   var(--neutral-50);      /* body on dark surfaces */
  --text-on-dark-muted: var(--neutral-700);
  --text-on-brand:  var(--white);
  --text-inverse:   var(--white);

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--neutral-500);
  --surface-dark:     var(--secondary-900);  /* the signature black sections */
  --surface-dark-raised: var(--secondary-700);
  --surface-card-dark:   rgba(255, 255, 255, 0.04);

  /* Lines */
  --border-subtle:  var(--neutral-600);
  --border-strong:  var(--secondary-500);
  --border-on-dark: rgba(255, 255, 255, 0.10);

  /* Feedback (derived from the brand ramp) */
  --danger:   var(--primary-500);
  --success:  rgb(31, 138, 91);
  --warning:  rgb(214, 158, 46);

  /* Hero / image scrims */
  --scrim-bottom: linear-gradient(0deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%); /* @kind other */
  --scrim-card:   linear-gradient(180deg, rgba(14,14,14,0.25) 0%, rgba(14,14,14,0.55) 55%, rgba(14,14,14,0.92) 100%); /* @kind other */
}