/* =========================================================================
   TRICLO TYPOGRAPHY SYSTEM
   Version 1.0
   
   Drop-in stylesheet for web artifacts, prototypes and generated interfaces.
   Contains font imports, semantic tokens, weight utilities, and a type scale
   matching Triclo's print system.
   
   USAGE: Include this single file in your <head>:
     <link rel="stylesheet" href="triclo-typography.css">
   
   All three font sources (Typekit + Google Fonts) load via @import below.
   For best performance in production, replace the @imports with <link> tags
   in your HTML head instead.
   ========================================================================= */


/* ---- Font imports ------------------------------------------------------- */

/* Transducer Condensed + Extended — Adobe Typekit */
@import url("https://use.typekit.net/uld5cgo.css");

/* Space Grotesk (body) + Space Mono (technical) — Google Fonts */
/* Space Grotesk + Space Mono se autoalojan en fonts/fonts.css (importado por styles.css) */


/* ---- Font-family tokens with fallback stacks ---------------------------- */

:root {
  /* Transducer Condensed — narrow geometric sans.
     Fallback chain prioritises narrow geometric sans-serifs. */
  --font-transducer-condensed:
    "transducer-condensed",
    "Barlow Condensed",
    "Archivo Narrow",
    "Oswald",
    "Roboto Condensed",
    "Helvetica Neue Condensed",
    sans-serif;

  /* Transducer Extended — wider geometric sans.
     Fallback chain uses wider geometric sans-serifs; layouts may reflow
     slightly if Typekit is unavailable. */
  --font-transducer-extended:
    "transducer-extended",
    "Archivo",
    "Barlow",
    "Chakra Petch",
    "Inter",
    "Helvetica Neue",
    sans-serif;

  /* Space Grotesk — body copy and readable text */
  --font-body:
    "Space Grotesk",
    "Inter",
    "Helvetica Neue",
    "Arial",
    sans-serif;

  /* Space Mono — SKUs, part numbers, pricing, datasheet values */
  --font-mono:
    "Space Mono",
    "IBM Plex Mono",
    "Roboto Mono",
    "Courier New",
    monospace;

  /* ---- Semantic aliases (prefer these in components) ---- */
  --font-display:   var(--font-transducer-extended);    /* Hero / cover titles */
  --font-heading:   var(--font-transducer-condensed);   /* Section headers */
  --font-technical: var(--font-mono);                   /* References & numbers */
}


/* ---- Weight tokens ------------------------------------------------------ */

:root {
  --fw-hairline: 100;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     600;   /* Triclo primary heading weight */
  --fw-black:    900;
}


/* ---- Semantic type scale (composed presets) ----------------------------- */

/* Display — catalog covers, hero sections. Uses Transducer Extended Bold.   */
.text-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* H1 — section headers, category titles (CARROCERÍA, MECÁNICA, GRAPAS).    */
.text-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* H2 — subsection headers.                                                  */
.text-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* H3 — card titles, product names. Uses body font, not Transducer.          */
.text-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Eyebrow — small uppercase label above headings.                           */
.text-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Body — default reading text.                                              */
.text-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: 1.6;
}

/* Body large — lead paragraphs, highlighted descriptions.                   */
.text-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Small — captions, helper text, footnotes.                                 */
.text-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Technical — SKUs, part references, prices, datasheet values.              */
.text-technical {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Technical strong — prominent part numbers.                                */
.text-technical-strong {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}


/* ---- Atomic utilities (compose freely) ---------------------------------- */

.font-transducer-condensed { font-family: var(--font-transducer-condensed); }
.font-transducer-extended  { font-family: var(--font-transducer-extended); }
.font-body                 { font-family: var(--font-body); }
.font-mono                 { font-family: var(--font-mono); }

.fw-hairline { font-weight: 100; }
.fw-regular  { font-weight: 400; }
.fw-medium   { font-weight: 500; }
.fw-bold     { font-weight: 600; }
.fw-black    { font-weight: 900; }

.italic { font-style: italic; }


/* ---- Global base (optional — applies to plain HTML tags) ---------------- */
/* Remove this block if you prefer purely utility-driven styling.            */

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font-family: var(--font-heading); font-weight: var(--fw-bold); }
h2 { font-family: var(--font-heading); font-weight: var(--fw-medium); }
h3, h4 { font-family: var(--font-body); font-weight: var(--fw-bold); }

code, kbd, samp, pre { font-family: var(--font-mono); }