/* ==========================================================================
   CNTRL.MX — design tokens
   This is the ONLY file allowed to contain raw color values.
   Everything else references these custom properties.
   ========================================================================== */

:root {
  /* --- Brand palette -------------------------------------------------- */
  --fuego:  #FF2B01;  /* primary CTA + featured card accents, hero logo   */
  --piedra: #C8C2B7;  /* light surfaces, primary text on dark             */
  --tinta:  #242321;  /* dark raised surfaces, cards, nav                 */
  --carbon: #141310;  /* deepest background, footer, page base            */

  /* --- Derived states (still brand colors, never new hues) ------------ */
  --fuego-hover: #E02500;               /* Fuego darkened ~10%            */
  --clear: transparent;                 /* the only "named" color, lives here */

  /* Piedra at reduced strength — for borders, rules and secondary text.
     Values chosen so text variants stay ≥ 4.5:1 on --carbon and --tinta. */
  --piedra-80: color-mix(in srgb, var(--piedra) 80%, var(--clear));
  --piedra-30: color-mix(in srgb, var(--piedra) 30%, var(--clear));
  --piedra-15: color-mix(in srgb, var(--piedra) 15%, var(--clear));
  --piedra-08: color-mix(in srgb, var(--piedra) 8%,  var(--clear));
  --carbon-70: color-mix(in srgb, var(--carbon) 70%, var(--clear));
  --tinta-15:  color-mix(in srgb, var(--tinta) 15%, var(--clear));
  --carbon-45: color-mix(in srgb, var(--carbon) 45%, var(--clear));
  --carbon-0:  color-mix(in srgb, var(--carbon) 0%,  var(--clear));

  /* --- Semantic roles -------------------------------------------------- */
  --bg-page:        var(--carbon);
  --bg-raised:      var(--tinta);
  --bg-light:       var(--piedra);

  --text-on-dark:   var(--piedra);
  --text-muted:     var(--piedra-80);
  --text-on-light:  var(--carbon);

  --cta-bg:         var(--fuego);
  --cta-bg-hover:   var(--fuego-hover);
  --cta-text:       var(--carbon);   /* never white on Fuego */

  --accent:         var(--fuego);    /* featured card accents only */
  --border:         var(--piedra-15);
  --border-strong:  var(--piedra-30);
  --focus-ring:     var(--piedra);

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --tracking-label: 0.08em;

  /* --- Spacing (8pt rhythm, spacious) --------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --max-w: 1440px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;

  /* --- Layers ---------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-popover: 150;
  --z-consent: 300;
  --z-nav: 200;
  --z-menu: 100;
  --z-skip: 1000;
  --z-loader: 2000;
}