/* ============================================================
   CEMACO DESIGN SYSTEM
   colors_and_type.css — foundational tokens
   ============================================================ */

/* ---------- FONTS ---------- */
/* Primary (licensed, local only): Chalet – New York Nineteen Sixty
   Use in Cemaco projects that have the proper House Industries license.
   DO NOT serve publicly without a license. */
@font-face {
  font-family: "Chalet NY";
  src: url("../fonts/Chalet-NewYorkNineteenSixtymodificada.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Web-safe fallback — Hanken Grotesk (Google Fonts).
   Swiss grotesque that mirrors Chalet NY's architectural feel. */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap");

/* ---------- BRAND COLORS ---------- */
:root {
  /* Signature Cemaco green — sampled directly from the official isotype */
  --cemaco-green: #94D500;
  --cemaco-green-600: #7FB800;   /* hover / pressed */
  --cemaco-green-700: #689600;   /* pressed / text on light */
  --cemaco-green-100: #E8F7C2;   /* tinted surface / highlight */
  --cemaco-green-50:  #F4FBE3;   /* subtle bg / hover fill */

  /* Ink / neutrals — warm-neutral, retail-friendly */
  --ink-900: #111811;    /* near-black with a faint green cast */
  --ink-800: #1C2320;
  --ink-700: #2E3631;
  --ink-600: #4A524D;
  --ink-500: #6B7370;
  --ink-400: #9AA19D;
  --ink-300: #C5CAC6;
  --ink-200: #E2E5E1;
  --ink-100: #F1F3EF;
  --ink-50:  #F8F9F6;    /* canvas */
  --white:   #FFFFFF;

  /* Cemaco Indigo — second key brand color (#101E8E).
     Role: corporate / trust / editorial counterweight to the green.
     Use for: services, cuenta Cemaco, footer corporate strip, tipografía editorial,
     illustration accents. Never as a hover state for green. */
  --cemaco-indigo:     #101E8E;  /* BASE — corporate / trust */
  --cemaco-indigo-950: #060A3D;  /* deepest shade — text on light tints */
  --cemaco-indigo-900: #0A1258;  /* shadow / hover pressed */
  --cemaco-indigo-800: #101E8E;  /* alias of base */
  --cemaco-indigo-700: #1E2FB5;  /* hover */
  --cemaco-indigo-600: #3447D6;  /* active / focus ring */
  --cemaco-indigo-500: #5465E8;  /* decorative mid */
  --cemaco-indigo-400: #7886F0;  /* illustration mid-light */
  --cemaco-indigo-300: #9FA9F5;  /* tint — subtle fill */
  --cemaco-indigo-200: #C4CAF8;  /* tint — chip / badge bg */
  --cemaco-indigo-100: #E2E5FB;  /* tint — section bg */
  --cemaco-indigo-50:  #F0F2FD;  /* tint — hover fill */

  /* Secondary accents — used sparingly for category/status
     (grounded in common retail category colors; use sparingly) */
  --accent-terracotta: #C4542B;  /* Hardware / construction category */
  --accent-sand:       #E8D9B9;  /* warm neutral bg (Home) */
  --accent-sky:        var(--cemaco-indigo);  /* info / link — unified on indigo */
  --accent-sun:        #F5B324;  /* promo / sale highlight */

  /* Semantic */
  --success: var(--cemaco-green-700);
  --success-bg: var(--cemaco-green-50);
  --warning: #B8860B;
  --warning-bg: #FFF6D6;
  --danger:  #C4321A;
  --danger-bg: #FDEAE5;
  --info:    var(--accent-sky);
  --info-bg: #E5EEF7;

  /* Surfaces */
  --bg:           var(--ink-50);
  --bg-elevated:  var(--white);
  --bg-sunken:    var(--ink-100);
  --bg-inverse:   var(--ink-900);

  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-600);   /* secondary text */
  --fg-3: var(--ink-500);   /* tertiary / meta */
  --fg-4: var(--ink-400);   /* disabled */
  --fg-on-brand: var(--white);      /* text on green */
  --fg-on-inverse: var(--white);

  /* Borders */
  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-subtle:  var(--ink-100);
  --border-brand:   var(--cemaco-green);

  /* Type stacks */
  --font-display: "Chalet NY", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DM Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Radii — slightly soft, never pillowy (retail, approachable but not toy-ish) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows — subtle, physical */
  --shadow-xs: 0 1px 2px rgba(17, 24, 17, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 24, 17, 0.06), 0 1px 2px rgba(17, 24, 17, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 24, 17, 0.08), 0 2px 4px rgba(17, 24, 17, 0.04);
  --shadow-lg: 0 12px 28px rgba(17, 24, 17, 0.10), 0 4px 8px rgba(17, 24, 17, 0.05);
  --shadow-brand: 0 8px 20px rgba(148, 213, 0, 0.28);
  --shadow-indigo: 0 8px 20px rgba(16, 30, 142, 0.22);

  /* Spacing (4-pt grid) */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ---------- TYPE SCALE ----------
   Display type uses Chalet NY. Sentence case always — nunca uppercase decorativo.
   Body is Hanken Grotesk, optimized for Spanish copy (accents / ñ). */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); }
body { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: 0;
  
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  
  color: var(--cemaco-green-700);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
}

.body-lg { font-size: 18px; line-height: 1.55; }
.body-sm { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.caption { font-size: 12px; line-height: 1.4; color: var(--fg-3); letter-spacing: 0.01em; }

.price {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.price-strike {
  text-decoration: line-through;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-weight: 400;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

a {
  color: var(--cemaco-green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--cemaco-green-600); }