/* fonts from Google at load (M decision 2026-07-07): serif = Noto Serif > Newsreader > Domine;
   sans = Roboto > Geist > Arial. Iowan Old Style dropped (not licensed for web). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,300..700;1,300..700&display=swap');

/* ============================================================
   CORPORATE PALETTE (M-approved 2026-07-09) — 7 colors x 7 OKLCH steps.
   English closest-match names per M's rule; display naming copper-3..copper+3
   maps to CSS -m3..-p3 ('+' is invalid in custom property names).
   Full system + provenance: /internal/color-palette.html
   ============================================================ */
:root {
  --oil-m3: #000000;
  --oil-m2: #020100;
  --oil-m1: #0C0703;
  --oil: #1C1610;  /* Oil · Tinta */
  --oil-p1: #2D2620;
  --oil-p2: #3F3831;
  --oil-p3: #524A43;
  --copper-m3: #6E3B00;
  --copper-m2: #894B00;
  --copper-m1: #A15E19;
  --copper: #B87333;  /* Copper · Cobre */
  --copper-p1: #CF884A;
  --copper-p2: #E79E60;
  --copper-p3: #FEB476;
  --quarter-spanish-white-m3: #B0A896;
  --quarter-spanish-white-m2: #C6BEAB;
  --quarter-spanish-white-m1: #DDD5C1;
  --quarter-spanish-white: #F4ECD8;  /* Quarter Spanish White · Pergamino */
  --quarter-spanish-white-p1: #FFFFFF;
  --quarter-spanish-white-p2: #FFFFFF;
  --quarter-spanish-white-p3: #FFFFFF;
  --san-juan-m3: #00233E;
  --san-juan-m2: #0F3553;
  --san-juan-m1: #234867;
  --san-juan: #365B7C;  /* San Juan · Azul San Juan */
  --san-juan-p1: #4A6F91;
  --san-juan-p2: #5E84A7;
  --san-juan-p3: #7299BD;
  --sweet-brown-m3: #590500;
  --sweet-brown-m2: #780B01;
  --sweet-brown-m1: #8F2719;
  --sweet-brown: #A63D2E;  /* Sweet Brown · Teja */
  --sweet-brown-p1: #BE5342;
  --sweet-brown-p2: #D66856;
  --sweet-brown-p3: #EE7E6B;
  --fern-green-m3: #153E05;
  --fern-green-m2: #28511B;
  --fern-green-m1: #3B652E;
  --fern-green: #4F7942;  /* Fern Green · Verde Helecho */
  --fern-green-p1: #638E56;
  --fern-green-p2: #78A46A;
  --fern-green-p3: #8DBA7F;
  --metallic-sunburst-m3: #6D5900;
  --metallic-sunburst-m2: #846C00;
  --metallic-sunburst-m1: #9A811F;
  --metallic-sunburst: #B0963A;  /* Metallic Sunburst · Ámbar */
  --metallic-sunburst-p1: #C6AC52;
  --metallic-sunburst-p2: #DDC268;
  --metallic-sunburst-p3: #F4D97F;

  /* role aliases into the palette */
  --paper: var(--quarter-spanish-white);
  --err:   var(--sweet-brown);
  --warn:  var(--metallic-sunburst);
}

/* ============================================================
   foro.legal — Design Tokens · PAPER edition
   Editorial cream canvas, deep ink text, single ochre accent.
   ============================================================ */

/* --- Webfonts ---------------------------------------------- */







:root {
  /* === COLOR — BONE (paper surfaces, the canvas) ============ */
  /* Previously the "light text" ramp; in Paper edition it's the surface ramp. */
  /* OKLCH-uniform surface ramp — M visual sign-off 2026-07-14. Perceptually-even
     ΔL steps between the SAME endpoints (bone-0 canvas ↔ bone-4 pressed); the
     in-between steps (bone-1/2/3) replace the legacy hand-tuned ramp. Provenance
     + swatches in the /internal palette doc. canvas == --quarter-spanish-white. */
  --bone-0: var(--quarter-spanish-white);
  --bone-1: #eae1c8;           /* default surface   (was #ede3c9 hand-tuned) */
  --bone-2: #e0d5b8;           /* elevated surface   (was #e6dcc1 hand-tuned) */
  --bone-3: #d7caa9;           /* raised             (was #dccfb0 hand-tuned) */
  --bone-4: #cdbf99;           /* pressed / strongest elevated (endpoint, kept) */

  /* === COLOR — INK (deep text on paper) ===================== */
  /* Previously the "dark surface" ramp; now the text ramp. */
  --ink-0: #1c1610;            /* darkest text — primary */
  --ink-1: #382e1f;            /* secondary text */
  --ink-2: #5a4d36;            /* tertiary text / icons */
  --ink-3: #8a7a5c;            /* muted / captions */
  --ink-4: #b3a587;            /* disabled */

  /* === COLOR — LINE (borders, dividers — ink-tinted hairlines) */
  --line-1: rgba(28, 22, 16, 0.08);
  --line-2: rgba(28, 22, 16, 0.16);
  --line-3: rgba(28, 22, 16, 0.28);

  /* === COLOR — PAPER (alternative deeper-cream accent surfaces) */
  --paper-0: #efe5cd;          /* slightly deeper cream */
  --paper-1: #e3d6b3;          /* aged */
  --paper-2: #d0bf95;          /* sun-aged */
  --paper-3: #b59f74;          /* leathered */

  /* === COLOR — DARK PAPER (rare contrast surfaces, for rhythm) */
  --espresso-0: #251f17;       /* deep accent panel — used for marketing rhythm sections */
  --espresso-1: #2f261b;
  --espresso-2: #392d21;

  /* === COLOR — ACCENTS ======================================= */
  --ochre:      var(--copper);      /* DEPRECATED alias — use --copper (exact #B87333, M 2026-07-09) */
  --ochre-soft: var(--copper-p1);   /* DEPRECATED alias */
  --ochre-deep: var(--copper-m1);   /* DEPRECATED alias — pressed/hover per palette */
  --ochre-tint: rgba(184, 115, 51, 0.12);  /* faint wash of --copper */

  --slate:      var(--san-juan);    /* DEPRECATED alias — use --san-juan */
  --slate-soft: var(--san-juan-p1); /* DEPRECATED alias */
  --slate-deep: var(--san-juan-m1); /* DEPRECATED alias */

  /* === COLOR — SEMANTIC ====================================== */
  --ok:     var(--fern-green);      /* exact official value #4F7942 (M 2026-07-09) */
  --warn:   #a07418;           /* caution */
  --danger: #a83a26;           /* error */
  --info:   var(--slate);

  /* === SEMANTIC TEXT ========================================= */
  --fg-1: var(--ink-0);
  --fg-2: var(--ink-1);
  --fg-3: var(--ink-2);
  --fg-4: var(--ink-3);
  --fg-on-accent: #faf6ed;     /* light text on ochre/danger backgrounds */
  --fg-link: var(--ochre-deep);

  /* === SEMANTIC SURFACE ====================================== */
  --bg-canvas:   var(--bone-0);
  --bg-surface:  var(--bone-1);
  --bg-elevated: var(--bone-2);
  --bg-raised:   var(--bone-3);
  --bg-overlay:  rgba(28, 22, 16, 0.42);

  /* === TYPOGRAPHY — FAMILIES ================================ */
  --font-serif: "Noto Serif", "Newsreader", "Domine", serif;
  --font-sans:  "Roboto", "Geist", Arial, sans-serif;
  --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === TYPOGRAPHY — SCALE =================================== */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   62px;
  --fs-6xl:   80px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  /* === SPACING (4px base) =================================== */
  --s-0: 0;
  --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: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* === RADIUS =============================================== */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* === SHADOWS (soft on paper; warm ink, low opacity) ======= */
  --shadow-1: 0 1px 0 rgba(28,22,16,0.04), 0 1px 2px rgba(28,22,16,0.06);
  --shadow-2: 0 2px 8px rgba(28,22,16,0.08), 0 1px 2px rgba(28,22,16,0.05);
  --shadow-3: 0 12px 32px -8px rgba(28,22,16,0.16), 0 2px 6px rgba(28,22,16,0.08);
  --shadow-4: 0 28px 64px -16px rgba(28,22,16,0.22), 0 4px 12px rgba(28,22,16,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 252, 240, 0.5);
  --shadow-focus: 0 0 0 3px rgba(184, 118, 58, 0.28);

  /* === MOTION =============================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.5, 1.2, 0.5, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    420ms;

  /* === LAYOUT =============================================== */
  --maxw-prose:  68ch;
  --maxw-narrow: 720px;
  --maxw-page:   1280px;
  --maxw-wide:   1440px;
}

/* =============================================================
   SEMANTIC TYPOGRAPHY — use these classes on text
   ============================================================ */

.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-optical-sizing: auto;
}
.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}
.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 400;
}
.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 400;
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}
.t-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  font-weight: 500;
}
.t-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-snug);
  font-weight: 300;
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  font-weight: 400;
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  font-weight: 400;
  letter-spacing: 0;
}
.t-cite {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--fg-2);
}
.t-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 300;
  font-style: italic;
  color: var(--fg-1);
}

/* Universal base */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ochre-tint); color: var(--ink-0); }

/* Paste ("Pegar") button — TOTP / recovery-code fields (M 2026-07-14).
   Real bone-2 fill = one surface step DARKER than the bone-1 card, so it no
   longer blends into the background (the old transparent fill rendered as the
   card colour, invisible on mobile). Icon + text when there's room; the label
   hides on very narrow screens → icon-only, never text-only (rule 16). */
.paste-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-1, #382e1f);
  background: var(--bone-2, #e0d5b8);
  border: 1px solid var(--line-2, rgba(28, 22, 16, 0.16));
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.paste-btn:hover:not(:disabled) { background: var(--bone-3, #d7caa9); }
.paste-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.paste-btn.is-ok { color: var(--fern-green, #4F7942); }
.paste-btn.is-err { color: var(--sweet-brown, #A63D2E); }
@media (max-width: 380px) { .paste-btn-label { display: none; } }