/* ============================================================
   Pablo Martínez — Diseño y Construcción
   Colors & Typography foundation
   ============================================================ */

/* --- Webfonts (free Google Fonts) ---
   Display  : Space Grotesk
   UI/Body  : Inter
   Mono     : JetBrains Mono
*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand & Accent ---------- */
  --c-black:        #000000;   /* announcement bar, anchor */
  --c-primary:      #17171c;   /* near-black, CTAs, dark cards */
  --c-ink:          #212121;   /* default text */
  --c-deep-green:   #003c33;   /* signature dark band (was 'Command/North') */
  --c-dark-navy:    #071829;   /* secondary dark band */
  --c-action-blue:  #1863dc;   /* editorial links */
  --c-focus-blue:   #4c6ee6;   /* focus rings */
  --c-coral:        #ff7759;   /* taxonomy chips, warm marker */
  --c-coral-soft:   #ffad9b;   /* pale chip borders */

  /* ---------- Surface ---------- */
  --c-canvas:       #ffffff;
  --c-soft-stone:   #eeece7;   /* warm neutral block */
  --c-pale-green:   #edfce9;   /* pale wash */
  --c-pale-blue:    #f1f5ff;   /* pale wash */
  --c-card-border: #f2f2f2;

  /* ---------- Rules & muted ---------- */
  --c-hairline:     #d9d9dd;
  --c-border-light: #e5e7eb;
  --c-muted:        #93939f;   /* metadata, dates */
  --c-slate:        #75758a;   /* tertiary text */
  --c-body-muted:   #616161;

  /* ---------- Semantic ---------- */
  --c-form-focus:   #9b60aa;
  --c-error:        #b30000;
  --c-on-primary:   #ffffff;
  --c-on-dark:      #ffffff;

  /* Convenience aliases (matches doc names) */
  --fg1: var(--c-ink);
  --fg2: var(--c-body-muted);
  --fg3: var(--c-muted);
  --bg1: var(--c-canvas);
  --bg2: var(--c-soft-stone);
  --line-1: var(--c-hairline);
  --line-2: var(--c-border-light);

  /* ---------- Type families ---------- */
  --ff-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ff-ui:      "Inter", ui-sans-serif, system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type scale (size / lh / tracking) ---------- */
  --t-hero-size: 96px;     --t-hero-lh: 1;   --t-hero-track: -1.92px;
  --t-prod-size: 72px;     --t-prod-lh: 1;   --t-prod-track: -1.44px;
  --t-sectd-size: 60px;    --t-sectd-lh: 1;  --t-sectd-track: -1.2px;
  --t-secth-size: 48px;    --t-secth-lh: 1.2;--t-secth-track: -0.48px;
  --t-cardh-size: 32px;    --t-cardh-lh: 1.2;--t-cardh-track: -0.32px;
  --t-feath-size: 24px;    --t-feath-lh: 1.3;--t-feath-track: 0;
  --t-bodyl-size: 18px;    --t-bodyl-lh: 1.4;
  --t-body-size: 16px;     --t-body-lh: 1.5;
  --t-btn-size: 14px;      --t-btn-lh: 1.71;
  --t-cap-size: 14px;      --t-cap-lh: 1.4;
  --t-mono-size: 14px;     --t-mono-lh: 1.4;  --t-mono-track: 0.28px;
  --t-micro-size: 12px;    --t-micro-lh: 1.4;

  /* ---------- Spacing (8px base, with documented offsets) ---------- */
  --s-xxs: 2px;
  --s-xs:  6px;
  --s-sm:  8px;
  --s-md:  12px;
  --s-lg:  16px;
  --s-xl:  24px;
  --s-xxl: 32px;
  --s-3xl: 56px;
  --s-section: 80px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 32px;
  --r-full: 9999px;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --gutter: 24px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emph:     cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Base + semantic type roles
   ============================================================ */

html, body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--ff-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings */
.t-hero, h1.display, .display-hero {
  font-family: var(--ff-display);
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-lh);
  letter-spacing: var(--t-hero-track);
  font-weight: 400;
  color: var(--c-ink);
}

.t-product-display {
  font-family: var(--ff-display);
  font-size: var(--t-prod-size);
  line-height: var(--t-prod-lh);
  letter-spacing: var(--t-prod-track);
  font-weight: 400;
}

.t-section-display, h1 {
  font-family: var(--ff-ui);
  font-size: var(--t-sectd-size);
  line-height: var(--t-sectd-lh);
  letter-spacing: var(--t-sectd-track);
  font-weight: 400;
}

.t-section-heading, h2 {
  font-family: var(--ff-ui);
  font-size: var(--t-secth-size);
  line-height: var(--t-secth-lh);
  letter-spacing: var(--t-secth-track);
  font-weight: 400;
}

.t-card-heading, h3 {
  font-family: var(--ff-ui);
  font-size: var(--t-cardh-size);
  line-height: var(--t-cardh-lh);
  letter-spacing: var(--t-cardh-track);
  font-weight: 400;
}

.t-feature-heading, h4 {
  font-family: var(--ff-ui);
  font-size: var(--t-feath-size);
  line-height: var(--t-feath-lh);
  font-weight: 400;
}

.t-body-large, .lead {
  font-size: var(--t-bodyl-size);
  line-height: var(--t-bodyl-lh);
}

p, .t-body {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink);
}

.t-caption, small {
  font-size: var(--t-cap-size);
  line-height: var(--t-cap-lh);
  color: var(--c-body-muted);
}

.t-mono, .mono-label {
  font-family: var(--ff-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-lh);
  letter-spacing: var(--t-mono-track);
  text-transform: uppercase;
}

.t-button {
  font-size: var(--t-btn-size);
  line-height: var(--t-btn-lh);
  font-weight: 500;
}

.t-micro {
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
}

a {
  color: var(--c-action-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--c-hairline); margin: var(--s-xl) 0; }

/* Helper surface classes */
.surface-canvas { background: var(--c-canvas); color: var(--c-ink); }
.surface-stone  { background: var(--c-soft-stone); color: var(--c-ink); }
.surface-green  { background: var(--c-deep-green); color: var(--c-on-dark); }
.surface-navy   { background: var(--c-dark-navy);  color: var(--c-on-dark); }
.surface-primary{ background: var(--c-primary);    color: var(--c-on-dark); }
.surface-pale-green { background: var(--c-pale-green); color: var(--c-ink); }
.surface-pale-blue  { background: var(--c-pale-blue);  color: var(--c-ink); }