/* ============================================================
   NOAK — Colors & Typography Tokens
   ============================================================
   Brand: NOAK (Coresa Group) — multi-category retail e-commerce
   Primary brand color confirmed from packaging spec: Pantone 165 C
   sRGB: #FF671F  ·  CMYK reference: 0/68/100/0
   ============================================================ */

/* ---------- Fonts ----------
   NOAK's brand typeface is RATIONAL by Rene Bieder.
   The wordmark itself is custom lettering shipped as an asset — it is
   NOT typed out; use the logo files in /assets when rendering the mark.

   System usage:
     Display (headlines, hero, eyebrows) — Rational Bold (700)
     Subheads / strong UI                — Rational SemiBold (600)
     Body / UI                           — Rational Medium (500) / Light (300)
     Tech / SKU                          — Rational Medium with mono spacing
*/
/* Local brand fonts — Rational by Rene Bieder.
   Files live at /fonts and are the authoritative brand assets. */
@font-face {
  font-family: 'Rational';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Rational-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Rational';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/Rational-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Rational';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Rational-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Rational';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/Rational-Bold.otf') format('opentype');
}

:root {
  /* ---------- BRAND COLORS ----------
     Primary brand color: refined deep slate-blue. Lifts the previous
     silver gray without being loud. The variable name keeps the
     historic "orange" prefix to avoid breaking the ~120 files that
     reference it; the value is what changed. */
  --noak-orange:        #FF671F; /* NOAK orange — primary (unificado con ncm-final) */
  --noak-orange-600:    #E85614; /* hover/press */
  --noak-orange-700:    #C7470E;
  --noak-orange-300:    #FF9466;
  --noak-orange-200:    #FFB593;
  --noak-orange-100:    #FFD9C6;
  --noak-orange-50:     #FFF3EC;

  /* Aliased semantic names — prefer these in new code */
  --noak-primary:       #FF671F;
  --noak-primary-600:   #2E4866;
  --noak-primary-300:   #6B82A6;
  --noak-silver:        #3D5A80;     /* legacy alias kept for theme refs */
  --noak-silver-600:    #2E4866;
  --noak-silver-300:    #6B82A6;

  /* Accent — warm copper for highlights (rating stars, key CTAs) */
  --noak-amber:         #C77A50;
  --noak-yellow:        #D9956A;

  /* ---------- NEUTRALS ----------
     Refined palette — softer, less strident. Backgrounds shift toward
     warm-white, text toward charcoal (not pure ink), borders are gentler. */
  --noak-black:         #1A1A1C; /* product housing black (slightly warm) */
  --noak-ink:           #1F2024; /* primary text on light — softened from pure ink */
  --noak-graphite:      #353841;
  --noak-steel:         #5A5E66;
  --noak-slate:         #7E828B;
  --noak-fog:           #B0B4BC;
  --noak-mist:          #E1E3E8;
  --noak-cloud:         #F0F1F4;
  --noak-paper:         #F9F9FB; /* page background, very subtle warm */
  --noak-white:         #FFFFFF;

  /* ---------- SEMANTIC ----------
     Muted semantic colors — desaturated for a more refined feel. */
  --noak-success:       #2D8A5C;
  --noak-warning:       #C99537;
  --noak-danger:        #B83D29;
  --noak-info:          #3D6FB8;

  /* ---------- FOREGROUND / BACKGROUND TOKENS ---------- */
  --fg-1:               var(--noak-ink);        /* primary text */
  --fg-2:               var(--noak-steel);      /* secondary text */
  --fg-3:               var(--noak-slate);      /* tertiary/labels */
  --fg-inverse:         var(--noak-white);
  --fg-brand:           var(--noak-orange);

  --bg-1:               var(--noak-white);      /* base canvas */
  --bg-2:               var(--noak-paper);      /* sectioned bg */
  --bg-3:               var(--noak-cloud);      /* card alt */
  --bg-inverse:         var(--noak-black);      /* hero / cta bands */
  --bg-brand:           var(--noak-orange);

  --border-1:           var(--noak-mist);
  --border-2:           var(--noak-cloud);
  --border-strong:      var(--noak-ink);

  /* ---------- TYPE FAMILIES ---------- */
  /* Brand typeface across the entire system: Rational by Rene Bieder. */
  --font-display:       'Rational', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:          'Rational', system-ui, -apple-system, Segoe UI, sans-serif;
  /* For spec/SKU rows we keep Rational but tighten with letter-spacing
     and feature-settings to get a quasi-mono cadence. */
  --font-mono:          'Rational', ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE ----------
     The canonical roles from the NOAK type system spec map to these tokens.
     Sizes are converted from pt (manual) to px @ 1pt = 1.333px (web @96dpi).

       Rol           Peso          Tamaño (pt)  Tamaño (px)  Leading
       H1 Título     ExtraBold 800  32 pt        42 px       38 pt / 1.19
       H2 Título     Bold      700  24 pt        32 px       30 pt / 1.25
       H3 Título     SemiBold  600  18 pt        24 px       24 pt / 1.33
       Cuerpo        Regular   400  11 pt        15 px       18 pt / 1.64
       Cuerpo Énfasis Bold     700  11 pt        15 px       18 pt / 1.64
       Subtítulo     Italic    400  14 pt        19 px       20 pt / 1.43
       Etiquetas     Bold      700   9 pt        12 px       auto
       Pie de Foto   Light     300   9 pt        12 px       auto
  */

  /* Display sizes — marketing-only (hero / landing). Above the manual scale. */
  --fs-d1: 88px;   /* mega hero, all-caps */
  --fs-d2: 64px;
  --fs-d3: 48px;

  /* Manual-spec scale (canonical) */
  --fs-h1: 42px;   /* H1 — ExtraBold 800 */
  --fs-h2: 32px;   /* H2 — Bold 700 */
  --fs-h3: 24px;   /* H3 — SemiBold 600 */
  --fs-h4: 18px;   /* internal subhead, not in manual */
  --fs-body: 15px;     /* Cuerpo — Regular 400 */
  --fs-subtitle: 19px; /* Subtítulo — Italic 400 */
  --fs-label: 12px;    /* Etiquetas — Bold 700 */
  --fs-caption: 12px;  /* Pie de foto — Light 300 */
  --fs-small: 13px;
  --fs-xs: 12px;
  --fs-micro: 11px;

  /* Manual leadings — line-heights as multipliers */
  --lh-h1: 1.19;   /* 38pt over 32pt */
  --lh-h2: 1.25;
  --lh-h3: 1.33;
  --lh-body: 1.64;  /* 18pt over 11pt */
  --lh-subtitle: 1.43;
  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-base: 1.45;
  --lh-loose: 1.6;

  --w-light: 300;
  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  --tracking-mega:    -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-base:     0;
  --tracking-caps:     0.06em;   /* used on small all-caps eyebrows */
  --tracking-wide:     0.12em;   /* used on tech/spec labels */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 2px rgba(11,11,12,0.06), 0 1px 1px rgba(11,11,12,0.04);
  --shadow-2: 0 4px 12px rgba(11,11,12,0.08), 0 2px 4px rgba(11,11,12,0.04);
  --shadow-3: 0 12px 32px rgba(11,11,12,0.12), 0 4px 12px rgba(11,11,12,0.06);
  --shadow-brand: 0 8px 24px rgba(255,103,31,0.32);
  --shadow-product: 0 32px 48px -16px rgba(11,11,12,0.28); /* under floating product shots */

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;    --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px;  --s-11: 80px; --s-12: 96px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply by class or as a base reset
   ============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-d1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-d2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.display-3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-d3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h1, .h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);   /* 800 — ExtraBold per manual */
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-tight);
}
h2, .h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);        /* 700 — Bold per manual */
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
h3, .h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);    /* 600 — SemiBold per manual */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
h4, .h4 { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--fs-h4); line-height: var(--lh-base); }

p, .body, .t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);     /* 400 — Cuerpo Principal */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.t-body strong, .t-emphasis {
  font-weight: var(--w-bold);        /* 700 — Cuerpo Énfasis */
}
.t-subtitle {                        /* Subtítulo — Italic 400 */
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-style: italic;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  color: var(--fg-2);
}
.t-label {                            /* Etiquetas — Bold 700 9pt */
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.2;
}
.t-caption {                          /* Pie de Foto — Light 300 9pt */
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: 1.4;
}

.body-lg { font-size: 18px; line-height: var(--lh-base); }
.small   { font-size: var(--fs-small); }
.xs      { font-size: var(--fs-xs); }
.micro   { font-size: var(--fs-micro); }

/* Eyebrow / tech-label — small all-caps, wide-tracked */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.spec-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}