/* =============================================================
   Soluciones Mecánicas — design tokens
   Extracted from the approved "Inicio — México" artboard.
   Every max value in a clamp() equals the artboard value, so the
   page renders pixel-identical to the mockup at 1440px and scales
   down cleanly below it. Never hard-code a colour or size in a
   component — add a token here instead.
   ============================================================= */

:root {
  /* ---------- brand ---------- */
  --sm-navy:            #00488F;   /* primary: headings, buttons, ring */
  --sm-navy-deep:       #002852;   /* flotillas panel */
  --sm-blue-on-dark:    #3D9BFF;   /* navy-family blue that reads on ink/photo */
  --sm-lime:            #ADE805;   /* accent — see contrast rule below */
  --sm-lime-bright:     #C6F53A;   /* gradient top */
  --sm-lime-deep:       #9FD600;   /* gradient bottom */
  --sm-ink:             #0B0F14;   /* dark photo bands */

  /* ---------- surfaces ---------- */
  --sm-bg:              #FFFFFF;
  --sm-surface:         #F3F5F8;   /* contact / footer band */
  --sm-chip:            #EEF2F7;   /* service chips */
  --sm-border:          #E3E7EC;
  --sm-border-strong:   #D5DAE1;   /* form fields */
  --sm-border-soft:     #DDE2E8;

  /* ---------- text ---------- */
  --sm-text:            #111111;
  --sm-text-body:       #3B4450;
  --sm-text-muted:      #6B7280;
  --sm-text-muted-alt:  #4B5563;
  --sm-on-dark:         #FFFFFF;
  --sm-on-dark-body:    #D5DDE8;
  --sm-on-dark-soft:    #E6EBF1;

  /* ---------- utility ---------- */
  --sm-star:            #E5484D;
  --sm-whatsapp:        #25D366;

  /* ---------- scrims & glass ---------- */
  --sm-scrim-hero:      linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.72) 45%, rgba(8,12,18,.30) 100%);
  --sm-scrim-nav:       linear-gradient(180deg, rgba(8,12,18,.75), rgba(8,12,18,0));
  --sm-scrim-band:      rgba(8,12,18,.78);
  --sm-scrim-band-soft: rgba(8,12,18,.66);
  --sm-glass:           rgba(255,255,255,.14);
  --sm-glass-border:    rgba(255,255,255,.22);

  /* ---------- gradient & shadow ---------- */
  --sm-lime-gradient:   linear-gradient(180deg, var(--sm-lime-bright) 0%, var(--sm-lime-deep) 100%);
  --sm-shadow-lime:     0 10px 24px -8px rgba(173,232,5,.55);
  --sm-shadow-float:    0 12px 28px -8px rgba(0,0,0,.45);

  /* ---------- type families ---------- */
  --sm-font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --sm-font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- type scale (min → artboard max) ---------- */
  --sm-text-hero:   clamp(2.5rem,  6.10vw, 5.500rem);  /*  40 →  88 */
  --sm-text-stat:   clamp(3rem,    5.83vw, 5.250rem);  /*  48 →  84 */
  --sm-text-h2:     clamp(2rem,    4.44vw, 4.000rem);  /*  32 →  64 */
  --sm-text-h2-sm:  clamp(1.875rem,3.89vw, 3.500rem);  /*  30 →  56 */
  --sm-text-h3:     clamp(1.5rem,  2.22vw, 2.000rem);  /*  24 →  32 */
  --sm-text-h4:     clamp(1.375rem,1.81vw, 1.625rem);  /*  22 →  26 */
  --sm-text-lead:   clamp(1.0625rem,1.39vw,1.250rem);  /*  17 →  20 */
  --sm-text-body-s: clamp(1rem,    1.18vw, 1.0625rem); /*  16 →  17 */
  --sm-text-small:  0.9375rem;                         /*  15 */
  --sm-text-xs:     0.875rem;                          /*  14 */
  --sm-text-2xs:    0.8125rem;                         /*  13 */

  /* ---------- line heights ---------- */
  --sm-lh-display: 0.98;
  --sm-lh-flat:    1;
  --sm-lh-tight:   1.05;
  --sm-lh-snug:    1.12;
  --sm-lh-body:    1.65;
  --sm-lh-loose:   1.70;

  /* ---------- letter spacing ---------- */
  --sm-ls-display: 0.01em;
  --sm-ls-wordmark:0.03em;
  --sm-ls-btn:     0.04em;
  --sm-ls-btn-lg:  0.05em;
  --sm-ls-nav:     0.06em;
  --sm-ls-label:   0.12em;
  --sm-ls-eyebrow: 0.24em;

  /* ---------- space ---------- */
  --sm-gutter:     clamp(1.25rem, 3.89vw, 3.5rem);   /*  20 →  56 side padding */
  --sm-section-y:  clamp(3.5rem,  7.64vw, 6.875rem); /*  56 → 110 section padding */
  --sm-gap-2xs: 0.625rem;   /* 10 */
  --sm-gap-xs:  0.875rem;   /* 14 */
  --sm-gap-sm:  1.25rem;    /* 20 */
  --sm-gap-md:  2.25rem;    /* 36 */
  --sm-gap-lg:  2.5rem;     /* 40 */
  --sm-gap-xl:  3rem;       /* 48 */
  --sm-gap-2xl: 4.5rem;     /* 72 */
  --sm-gap-3xl: 5rem;       /* 80 */

  /* ---------- structure ---------- */
  --sm-container: 1440px;
  --sm-hero-h:    clamp(34rem, 59.7vw, 53.75rem);  /* 544 → 860 */
  --sm-band-h:    clamp(30rem, 52.8vw, 47.50rem);  /* 480 → 760 */
  --sm-band-h-lg: clamp(31rem, 54.2vw, 48.75rem);  /* 496 → 780 */

  /* ---------- radii ---------- */
  --sm-radius-pill:  999px;
  --sm-radius-photo: 6px;
  --sm-radius-field: 26px;
  --sm-radius-bar:   2px;

  /* ---------- motion ---------- */
  --sm-ease:      cubic-bezier(.22, .61, .36, 1);
  --sm-dur-fast:  .25s;
  --sm-dur:       .38s;
  --sm-dur-slow:  .9s;
  --sm-dur-reveal: 1s;
  --sm-reveal-y:  44px;
}

/* -------------------------------------------------------------
   CONTRAST RULES — these are constraints, not preferences.
   Measured against WCAG AA (4.5:1 body, 3:1 large text & UI).

     navy   on white ............ 9.0:1  PASS
     white  on navy ............. 9.0:1  PASS
     lime   on white ............ 1.5:1  FAIL — never text on white
     navy   on lime ............. 6.2:1  PASS — use for lime buttons
     #111   on lime ............ 12.9:1  PASS
     white  on lime ............. 1.4:1  FAIL — never
     muted  on white ............ 4.8:1  PASS

   So: lime is a FILL and a GRAPHIC accent. On light backgrounds it
   may never carry text. On the dark bands (--sm-ink at >=66% scrim)
   lime text clears 10:1 and is fine.
   ------------------------------------------------------------- */

.sm-on-lime  { color: var(--sm-navy); }
.sm-on-navy  { color: var(--sm-on-dark); }
.sm-on-dark  { color: var(--sm-on-dark-body); }