/* =====================================================================
   KRC Motorcycles — Design Tokens
   Sourced from the Figma file "KRC.fig" (KRC Karny 125 landing).
   Use these vars in any new product surface.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,800;1,400;1,800&family=Oswald:wght@500;600;700&display=swap");

:root {
  /* ---------- BRAND COLORS ----------------------------------------- */

  /* Core */
  --krc-black:        #000000;        /* hero / immersive backgrounds */
  --krc-night:        #111111;        /* near-black, used on dot UI / borders */
  --krc-charcoal:     #282828;        /* service-card bg                       */
  --krc-graphite:     #4A4A4A;        /* primary body copy                     */
  --krc-gunmetal:     #555555;        /* heading on light bg, secondary copy   */
  --krc-iron:         #666666;        /* video poster placeholder, muted text  */

  --krc-white:        #FFFFFF;
  --krc-snow:         #F9F9F9;        /* subtle off-white panel                */
  --krc-bone:         #F4F4F4;        /* spec section bg                       */
  --krc-fog:          #ECECEC;        /* tab dividers                          */
  --krc-silver:       #DDDDDD;        /* table inner borders                   */
  --krc-line:         #CCCCCC;        /* table outer borders                   */
  --krc-line-soft:    #E5E5E5;        /* card / row dividers                   */

  /* Accent / brand */
  --krc-red:          #DD2C1C;        /* corporate red — primary CTA           */
  --krc-red-hover:    #B8241B;
  --krc-purple:       #322775;        /* secondary CTA "QUIERO PROBARLA"      */
  --krc-purple-hover: #261A5C;
  --krc-blue:         #0A4FA0;        /* model accent (Karny Azul)            */
  --krc-grey-metallic:#8A8E92;        /* model accent (Karny Gris)            */

  /* Status / sello */
  --krc-sello-green:  #6FAE5B;        /* "GARANTÍA 6 AÑOS" sello              */
  --krc-sello-purple: #322775;        /* B+3 / A1 / AM carnet sellos          */

  /* Overlays (consistent dark veils on imagery) */
  --krc-overlay-40:   rgba(0,0,0,0.40);
  --krc-overlay-50:   rgba(0,0,0,0.50);
  --krc-overlay-60:   rgba(0,0,0,0.60);
  --krc-shadow-23:    rgba(0,0,0,0.23);
  --krc-shadow-19:    rgba(0,0,0,0.19);
  --krc-hairline:     rgba(0,0,0,0.05); /* button micro-border                */

  /* Semantic foreground / background */
  --krc-bg:           var(--krc-white);
  --krc-bg-inverse:   var(--krc-black);
  --krc-bg-muted:     var(--krc-bone);
  --krc-fg:           var(--krc-graphite);
  --krc-fg-strong:    var(--krc-night);
  --krc-fg-muted:     var(--krc-iron);
  --krc-fg-inverse:   var(--krc-white);
  --krc-border:       var(--krc-silver);
  --krc-border-soft:  var(--krc-line-soft);

  /* ---------- TYPOGRAPHY ------------------------------------------- */

  /* Families. Brand decision: Roboto for titles/display AND body
     (and EVERY inline UI text role: body, meta, tabs, table data, captions).
     Arial is NOT used. Oswald optional condensed display. */
  --krc-font-display: "Roboto", "Helvetica Neue", sans-serif;
  --krc-font-condensed: "Oswald", "Roboto Condensed", "Bebas Neue", sans-serif;
  --krc-font-body:    "Roboto", "Helvetica Neue", sans-serif;
  --krc-font-tab:     "Roboto", sans-serif;
  --krc-font-table:   "Roboto", sans-serif;

  /* Type scale — taken directly from the Figma frame */
  --krc-fs-hero:        clamp(2.5rem, 6vw, 5rem);   /* 80px H1 hero */
  --krc-fs-h1:          1.875rem;   /* 30px — section H1 */
  --krc-fs-h2:          1.5rem;     /* 24px */
  --krc-fs-h3:          1.25rem;    /* 20px — eyebrow / tab heading */
  --krc-fs-h6:          1.275rem;   /* 20.4px — model card headline */
  --krc-fs-price:       1.875rem;   /* 30px — PVPR */
  --krc-fs-tab:         1.1rem;     /* 17.6px — Lato Bold spec tabs */
  --krc-fs-body:        1rem;       /* 16px */
  --krc-fs-body-lg:     1.2rem;     /* 19.2px — italic blockquote */
  --krc-fs-button:      0.969rem;   /* 15.5px — CTA */
  --krc-fs-table:       0.9rem;     /* 14.4px — Lato table data */
  --krc-fs-meta:        0.875rem;   /* 14px — legal / breadcrumb */
  --krc-fs-eyebrow:     0.7625rem;  /* 12.2px — nav links uppercase */

  /* Line heights */
  --krc-lh-tight:       1.05;       /* hero display */
  --krc-lh-snug:        1.2;
  --krc-lh-base:        1.6;        /* body */
  --krc-lh-loose:       1.7;

  /* Tracking — uppercase needs ~50–80 / 1000em */
  --krc-tracking-cta:   0.05em;     /* 0.466 / 15.5px */
  --krc-tracking-h1:    0.05em;     /* 1.5 / 30px */
  --krc-tracking-h6:    0.05em;
  --krc-tracking-tab:   0.02em;
  --krc-tracking-meta:  0.06em;     /* nav uppercase */

  /* Weights actually present in the file */
  --krc-w-regular: 400;
  --krc-w-medium:  500;
  --krc-w-bold:    700;
  --krc-w-black:   800;

  /* ---------- LAYOUT / SPACING ------------------------------------- */
  --krc-container-max:  1370px;     /* matches Figma main column */
  --krc-container-pad:  75.4px;     /* matches Figma side gutter */
  --krc-grid-gutter:    24px;
  --krc-section-y-d:    96px;       /* desktop section rhythm */
  --krc-section-y-m:    56px;       /* mobile section rhythm  */

  /* Geometric scale — KRC uses square corners almost everywhere */
  --krc-radius-0:       0;          /* CTAs, cards, tables, panels */
  --krc-radius-pill:    9999px;     /* sellos circulares only      */
  --krc-radius-dot:     6px;        /* slider page-dot indicator   */

  /* Borders */
  --krc-border-w:       1px;
  --krc-border-cta:     2px;        /* outline secondary CTA       */
  --krc-tab-rail:       3px;        /* red rail next to active tab */

  /* Shadows — sparing; mostly product image floats */
  --krc-shadow-card:    0 6px 18px rgba(0,0,0,0.08);
  --krc-shadow-elevate: 0 12px 28px rgba(0,0,0,0.18);

  /* Motion */
  --krc-ease:           cubic-bezier(0.2, 0.7, 0.2, 1);
  --krc-dur-fast:       120ms;
  --krc-dur-base:       220ms;
  --krc-dur-slow:       420ms;
}

/* =====================================================================
   Semantic element styles — drop colors_and_type.css into any page
   and headings/body/CTAs will look on-brand without extra classes.
   ===================================================================== */

html { color: var(--krc-fg); background: var(--krc-bg); }

body {
  font-family: var(--krc-font-body);
  font-size: var(--krc-fs-body);
  font-weight: var(--krc-w-regular);
  line-height: var(--krc-lh-base);
  color: var(--krc-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .krc-h1 {
  font-family: var(--krc-font-display);
  font-size: var(--krc-fs-h1);
  font-weight: var(--krc-w-bold);
  line-height: 1.2;
  letter-spacing: var(--krc-tracking-h1);
  text-transform: uppercase;
  color: var(--krc-fg-strong);
  margin: 0;
}

h2, .krc-h2 {
  font-family: var(--krc-font-display);
  font-size: var(--krc-fs-h2);
  font-weight: var(--krc-w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}

h3, .krc-h3 {
  font-family: var(--krc-font-display);
  font-size: var(--krc-fs-h3);
  font-weight: var(--krc-w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--krc-fg-strong);
  margin: 0;
}

p { margin: 0 0 1em; line-height: var(--krc-lh-base); }

small, .krc-meta {
  font-size: var(--krc-fs-meta);
  color: var(--krc-fg-muted);
}

blockquote, .krc-blockquote {
  font-family: var(--krc-font-display);
  font-style: italic;
  font-size: var(--krc-fs-body-lg);
  line-height: 1.6;
  color: var(--krc-night);
  border-left: var(--krc-border-w) solid var(--krc-red);
  padding: 4px 0 4px 36px;
  margin: 0;
}

blockquote strong, .krc-blockquote--strong {
  font-weight: var(--krc-w-bold);
  font-style: italic;
  color: var(--krc-night);
}

.krc-eyebrow {
  font-family: var(--krc-font-body);
  font-size: var(--krc-fs-eyebrow);
  letter-spacing: var(--krc-tracking-meta);
  text-transform: uppercase;
  color: var(--krc-gunmetal);
}

/* CTAs — square, uppercase, no shadow, hairline border for crispness */
.krc-btn,
.krc-btn-primary,
.krc-btn-secondary,
.krc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--krc-font-body);
  font-weight: var(--krc-w-bold);
  font-size: var(--krc-fs-button);
  letter-spacing: var(--krc-tracking-cta);
  text-transform: uppercase;
  line-height: 1.6;
  padding: 12px 28px;
  border-radius: var(--krc-radius-0);
  border: 1px solid var(--krc-hairline);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--krc-dur-base) var(--krc-ease),
              color var(--krc-dur-base) var(--krc-ease),
              border-color var(--krc-dur-base) var(--krc-ease);
  user-select: none;
}

.krc-btn-primary {
  background: var(--krc-red);
  color: var(--krc-white);
}
.krc-btn-primary:hover { background: var(--krc-red-hover); }

.krc-btn-secondary {
  background: var(--krc-purple);
  color: var(--krc-white);
}
.krc-btn-secondary:hover { background: var(--krc-purple-hover); }

.krc-btn-ghost {
  background: transparent;
  color: var(--krc-white);
  border: var(--krc-border-cta) solid var(--krc-white);
}
.krc-btn-ghost:hover { background: var(--krc-white); color: var(--krc-black); }

/* Spec table */
.krc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--krc-font-table);
  font-size: var(--krc-fs-table);
  color: var(--krc-iron);
}
.krc-table th, .krc-table td {
  border: 1px solid var(--krc-line);
  padding: 14px 16px;
  text-align: left;
  line-height: 1.3;
}
.krc-table th { font-weight: var(--krc-w-bold); width: 35%; }