/* =========================================================
   Annamaria Galani — Foundations
   Colors + Typography tokens
   ========================================================= */

/* ---------- Fonts ----------
   Display + Sans: Schibsted Grotesk (editorial grotesque with refined,
                   slightly humanist proportions; used at light–medium
                   weights so display feels editorial rather than brutalist).
   Mono:           IBM Plex Mono (labels, numbering, eyebrows)

   The system is intentionally single-family. No italic, no serif.
*/
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color · Base ---------- */
  --ag-ink:        #0A0A0A;   /* near-black, primary ink */
  --ag-ink-90:    rgba(10,10,10,0.90);
  --ag-ink-60:    rgba(10,10,10,0.60);
  --ag-ink-40:    rgba(10,10,10,0.40);
  --ag-ink-15:    rgba(10,10,10,0.15);
  --ag-ink-08:    rgba(10,10,10,0.08);

  --ag-paper:      #F2F2EF;   /* cooled off-white — neutral, not warm beige */
  --ag-paper-pure: #FFFFFF;   /* pure white, for images / inverse */
  --ag-bone:       #E4E4E0;   /* cool grey-bone, sunken panels */

  --ag-acid:       #CCFF00;   /* signature acid chartreuse — single accent */
  --ag-acid-hover: #B8E600;
  --ag-acid-press: #94BB00;
  --ag-acid-60:   rgba(204,255,0,0.60);
  --ag-acid-40:   rgba(204,255,0,0.40);
  --ag-acid-15:   rgba(204,255,0,0.15);
  --ag-acid-08:   rgba(204,255,0,0.08);

  /* Legacy alias — kept for any downstream consumer that referenced the
     "electric" token name. Maps to the new acid accent. */
  --ag-electric:       var(--ag-acid);
  --ag-electric-hover: var(--ag-acid-hover);
  --ag-electric-press: var(--ag-acid-press);

  /* ---------- Color · Semantic ---------- */
  --ag-fg-1: var(--ag-ink);          /* primary text */
  --ag-fg-2: var(--ag-ink-60);       /* secondary text */
  --ag-fg-3: var(--ag-ink-40);       /* tertiary, captions */
  --ag-fg-inverse: var(--ag-paper);  /* on-dark text */

  --ag-bg-1: var(--ag-paper);        /* canvas */
  --ag-bg-2: var(--ag-bone);         /* sunken / panel */
  --ag-bg-inverse: var(--ag-ink);    /* dark sections */

  --ag-accent: var(--ag-acid);
  --ag-hairline: var(--ag-ink-15);
  --ag-divider: var(--ag-ink-08);

  /* ---------- Type · Families ---------- */
  --ag-font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ag-font-sans:    "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ag-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- Type · Scale ---------- */
  --ag-text-xs:   11px;   /* mono labels */
  --ag-text-sm:   13px;   /* mono labels large */
  --ag-text-base: 16px;   /* body */
  --ag-text-md:   19px;   /* lede */
  --ag-text-lg:   24px;   /* sub-heads */
  --ag-text-xl:   34px;   /* H3 */
  --ag-text-2xl:  56px;   /* H2 */
  --ag-text-3xl:  96px;   /* H1 / display medium */
  --ag-text-4xl:  168px;  /* Hero display */
  --ag-text-5xl:  240px;  /* Mega editorial */

  /* ---------- Spacing (4px base) ---------- */
  --ag-s-1:  4px;
  --ag-s-2:  8px;
  --ag-s-3:  12px;
  --ag-s-4:  16px;
  --ag-s-5:  24px;
  --ag-s-6:  32px;
  --ag-s-7:  48px;
  --ag-s-8:  64px;
  --ag-s-9:  96px;
  --ag-s-10: 128px;
  --ag-s-11: 192px;

  /* ---------- Radii (deliberately tiny — sharp aesthetic) ---------- */
  --ag-r-0: 0;
  --ag-r-1: 1px;
  --ag-r-2: 2px;
  /* No large radii. Everything is rectangular. */

  /* ---------- Soft set (clean / rounded homepage direction) ----------
     Opt-in tokens for the rounded, airy tile layout. The default brand
     remains sharp; these let a surface go softer without redefining the
     core. Use --ag-radius on cards, --ag-radius-pill on buttons. */
  --ag-radius:       22px;   /* tile / card corner */
  --ag-radius-sm:    14px;   /* small controls */
  --ag-radius-pill:  999px;  /* pill buttons */
  --ag-grid-faint:   rgba(10,10,10,0.05);   /* barely-there lattice */
  --ag-shadow-tile:  0 2px 10px rgba(10,10,10,0.05), 0 0 0 1px rgba(10,10,10,0.03);
  --ag-shadow-lift:  0 14px 36px rgba(10,10,10,0.12);
  --ag-shadow-pill:  0 10px 24px rgba(10,10,10,0.18);

  /* ---------- Borders ---------- */
  --ag-border-hairline: 1px solid var(--ag-hairline);
  --ag-border-ink:      1px solid var(--ag-ink);
  --ag-border-divider:  1px solid var(--ag-divider);

  /* ---------- Motion ---------- */
  --ag-ease:        cubic-bezier(0.2, 0.7, 0.1, 1);   /* default */
  --ag-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* exits, reveals */
  --ag-dur-fast:    120ms;
  --ag-dur-base:    240ms;
  --ag-dur-slow:    520ms;
  --ag-dur-reveal:  880ms;

  /* ---------- Layout ---------- */
  --ag-page-pad:    32px;
  --ag-grid-gap:    1px;        /* hairline grid between tiles */
  --ag-max-w:       1680px;
}

/* =========================================================
   Semantic element styles — reusable as utility classes
   ========================================================= */

.ag-display-mega {
  font-family: var(--ag-font-display);
  font-weight: 500;
  font-size: clamp(96px, 14vw, var(--ag-text-5xl));
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ag-fg-1);
}

.ag-display-hero {
  font-family: var(--ag-font-display);
  font-weight: 500;
  font-size: clamp(72px, 10vw, var(--ag-text-4xl));
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ag-fg-1);
}

.ag-h1 {
  font-family: var(--ag-font-display);
  font-weight: 500;
  font-size: var(--ag-text-3xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ag-fg-1);
}

.ag-h2 {
  font-family: var(--ag-font-sans);
  font-weight: 500;
  font-size: var(--ag-text-2xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ag-fg-1);
}

.ag-h3 {
  font-family: var(--ag-font-sans);
  font-weight: 500;
  font-size: var(--ag-text-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ag-fg-1);
}

.ag-lede {
  font-family: var(--ag-font-sans);
  font-weight: 400;
  font-size: var(--ag-text-md);
  line-height: 1.4;
  color: var(--ag-fg-1);
  text-wrap: pretty;
}

.ag-body {
  font-family: var(--ag-font-sans);
  font-weight: 400;
  font-size: var(--ag-text-base);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ag-fg-1);
  text-wrap: pretty;
}

.ag-caption {
  font-family: var(--ag-font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ag-fg-2);
}

.ag-label,
.ag-eyebrow {
  font-family: var(--ag-font-mono);
  font-weight: 400;
  font-size: var(--ag-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-fg-2);
}

.ag-label-lg {
  font-family: var(--ag-font-mono);
  font-weight: 400;
  font-size: var(--ag-text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-fg-1);
}

.ag-number {
  font-family: var(--ag-font-mono);
  font-weight: 400;
  font-size: var(--ag-text-xs);
  letter-spacing: 0.05em;
  color: var(--ag-fg-2);
  font-variant-numeric: tabular-nums;
}

/* Inline flourish — weight bump for emphasis inside body copy. */
.ag-flourish {
  font-family: var(--ag-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}