@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap");

/* ── styles.css ── */
/* =====================================================================
   Niroco.ads — Design System : global stylesheet entry point
   This file is intentionally a list of @imports only.
   Consumers link THIS file to get the full token + base layer.
   ===================================================================== */

/* ── tokens/fonts.css ── */
/* Niroco.ads — Webfonts
   --------------------------------------------------------------
   The brand's licensed fonts are:
     • Logo & Titles : "News706 BT" Bold  (a Times-family news serif)
     • Body          : a geometric sans (closest match: Poppins)

   No font binaries were provided (only .ai source files), so these are
   the closest free substitutes loaded from Google Fonts:
     • PT Serif  → substitutes News706 BT for display/titles
     • Poppins   → substitutes the body sans
   See readme.md (VISUAL FOUNDATIONS) — swap these for the licensed
   files if/when they are supplied. */



/* ── styles.css ── */

/* ── tokens/colors.css ── */
/* Niroco.ads — Color tokens
   Source of truth: "Colores y firuletes" brand sheet.
   Six hex values given, organised here into a cream base + four
   pastel accent families (each a light + saturated step) + ink. */

:root {
}

/* ── styles.css ── */

/* ── tokens/typography.css ── */
/* Niroco.ads — Typography tokens
   Display/Titles: News706 BT Bold  → PT Serif (substitute)
   Body/UI:        geometric sans   → Poppins (substitute) */

:root { /* @kind font */

  /* Type scale (display uses serif; everything else Poppins) */
  --fs-display:  64px;  /* hero logo-scale lockups */
  --fs-h1:       44px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-title:    20px;  /* section title (serif, w/ || brackets) */
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px; /* @kind other */
  --lh-body:     1.55; /* @kind other */
}

/* ── styles.css ── */

/* ── tokens/spacing.css ── */
/* Niroco.ads — Spacing, radius, shadow, motion tokens
   The brand is print-rooted: flat, generous whitespace, soft rounded
   cards and gentle shadows. Outlines feel hand-drawn (solid ink). */

:root { /* @kind spacing */
}

/* ── styles.css ── */

/* ── tokens/base.css ── */
/* Niroco.ads — Base layer
   Body defaults + a few signature brand utilities (marker highlight,
   the "|| title ||" section header, hand-drawn divider). Components
   reference tokens directly; these classes are conveniences for cards,
   docs and UI-kit screens. */

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif display helper */
.niro-display { font-family: var(--font-display); font-weight: var(--fw-bold); }

/* --- Marker highlight ("firulete" scribble behind words) ---
   Use <span class="niro-mark"> for lavender; modifiers for yellow/green.
   Slightly skewed, irregular radius → looks hand-drawn. */
.niro-mark {
  background: var(--highlight-lavender);
  padding: 0.02em 0.28em;
  border-radius: 0.7em 0.45em 0.85em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.niro-mark--yellow { background: var(--highlight-yellow); }
.niro-mark--green  { background: var(--highlight-green); }

/* --- Section title flanked by hand-drawn || brackets --- */
.niro-section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-title);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.niro-section-title::before,
.niro-section-title::after {
  content: "";
  width: 9px;
  height: 1.15em;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 3px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 6px 0 / 3px 100% no-repeat;
  transform: skewX(-9deg);
  border-radius: 2px;
}

/* --- Hand-drawn-feel divider --- */
.niro-divider {
  border: 0;
  height: 0;
  border-top: var(--border-w) dashed var(--border-soft);
  margin: var(--space-5) 0;
}

/* Cream card */
.niro-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── styles.css ── */


/* ── tokens/fonts.css ── */

/* ── tokens/colors.css ── */

/* ── tokens/typography.css ── */

/* ── tokens/spacing.css ── */

/* ── tokens/base.css ── */