/* =============================================================
   Lirentzia · colors_and_type.css
   The single source of truth for tokens used across the system.
   Three colors. Two weights. Six type sizes. No fourth of anything.
   ============================================================= */

/* -- Fonts ----------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Regular.woff2") format("woff2"),
       url("fonts/CormorantGaramond-Regular.woff")  format("woff");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Italic.woff2") format("woff2"),
       url("fonts/CormorantGaramond-Italic.woff")  format("woff");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Medium.woff2") format("woff2"),
       url("fonts/CormorantGaramond-Medium.woff")  format("woff");
}

:root {
  /* -- Core palette ------------------------------------------- */
  --lz-white:    #FFFFFF;
  --lz-ink:      #1A1714;
  --lz-cream:    #F4EFE5;
  --lz-oxblood:  #5C1F1F;

  /* -- Derived neutrals (single muted text + a paper edge) ---- */
  /* Both derived from ink mixed with cream; never invented anew. */
  --lz-text-muted:    #6B6357;   /* metadata, captions, addressees */
  --lz-rule-faint:    #E8E4DC;   /* hairline edges of cream surfaces */

  /* -- Semantic roles ----------------------------------------- */
  --lz-bg:            var(--lz-white);
  --lz-bg-surface:    var(--lz-cream);
  --lz-bg-inverse:    var(--lz-ink);

  --lz-fg:            var(--lz-ink);
  --lz-fg-muted:      var(--lz-text-muted);
  --lz-fg-inverse:    var(--lz-white);

  --lz-accent:        var(--lz-oxblood);
  --lz-rule:          var(--lz-oxblood);
  --lz-rule-thin:     var(--lz-rule-faint);

  /* -- Font families ------------------------------------------ */
  --lz-serif:  "Cormorant Garamond", "Hoefler Text", Garamond, Times, serif;
  --lz-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --lz-mono:   "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

  /* -- Type scale (the only sizes permitted) ------------------ */
  --lz-fs-display: 80px;   /* range 64-96 */
  --lz-fs-h1:      32px;
  --lz-fs-h2:      22px;
  --lz-fs-body:    16px;
  --lz-fs-meta:    12px;
  --lz-fs-caption: 11px;

  /* -- Line heights ------------------------------------------- */
  --lz-lh-wordmark: 1.0;
  --lz-lh-display:  1.15;
  --lz-lh-body:     1.7;
  --lz-lh-meta:     1.5;

  /* -- Letterspacing ------------------------------------------ */
  --lz-tracking-wordmark: 0.002em;
  --lz-tracking-display:  0.005em;
  --lz-tracking-body:     normal;
  --lz-tracking-button:   0.05em;
  --lz-tracking-caption:  0.08em;
  --lz-tracking-address:  0.12em;
  --lz-tracking-meta:     0.20em;

  /* -- Spacing (a minimal 4px step) --------------------------- */
  --lz-s-0:   0;
  --lz-s-1:   4px;
  --lz-s-2:   8px;
  --lz-s-3:   12px;
  --lz-s-4:   16px;
  --lz-s-5:   24px;
  --lz-s-6:   32px;
  --lz-s-7:   48px;
  --lz-s-8:   64px;
  --lz-s-9:   96px;
  --lz-s-10: 128px;

  /* -- Borders / rules ---------------------------------------- */
  --lz-rule-w-thin:   0.5px;
  --lz-rule-w:        1px;
  --lz-rule-w-thick:  2px;

  /* -- Radii (deliberately near-zero; documents have square corners) -- */
  --lz-radius-0:  0;
  --lz-radius-1:  2px;   /* code chips only */

  /* -- Layout caps -------------------------------------------- */
  --lz-measure:      62ch;    /* readable body width */
  --lz-page-max:    920px;    /* document-style page max */
  --lz-page-pad:     96px;    /* generous outer padding */
}

/* =============================================================
   Element baselines.  Imported into any HTML surface that uses
   the brand directly. Components and slides extend these.
   ============================================================= */

html, body {
  background: var(--lz-bg);
  color: var(--lz-fg);
  font-family: var(--lz-sans);
  font-size: var(--lz-fs-body);
  line-height: var(--lz-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lz-cream); color: var(--lz-ink); }

/* -- Display ---------------------------------------------------- */
.lz-display {
  font-family: var(--lz-serif);
  font-weight: 400;
  font-size: var(--lz-fs-display);
  line-height: var(--lz-lh-wordmark);
  letter-spacing: var(--lz-tracking-wordmark);
  color: var(--lz-ink);
}

/* -- Headings --------------------------------------------------- */
h1, .lz-h1 {
  font-family: var(--lz-serif);
  font-weight: 400;
  font-size: var(--lz-fs-h1);
  line-height: var(--lz-lh-display);
  letter-spacing: normal;
  margin: 0;
}
h2, .lz-h2 {
  font-family: var(--lz-serif);
  font-weight: 400;
  font-size: var(--lz-fs-h2);
  line-height: var(--lz-lh-display);
  letter-spacing: normal;
  margin: 0;
}

/* -- Body ------------------------------------------------------- */
p, .lz-body {
  font-family: var(--lz-sans);
  font-weight: 400;
  font-size: var(--lz-fs-body);
  line-height: var(--lz-lh-body);
  margin: 0 0 1em;
  max-width: var(--lz-measure);
  text-wrap: pretty;
}

/* -- Meta / address / caption ---------------------------------- */
.lz-meta {
  font-family: var(--lz-sans);
  font-size: var(--lz-fs-meta);
  line-height: var(--lz-lh-meta);
  letter-spacing: var(--lz-tracking-meta);
  text-transform: uppercase;
  color: var(--lz-fg-muted);
}
.lz-address {
  font-family: var(--lz-sans);
  font-size: var(--lz-fs-meta);
  line-height: var(--lz-lh-meta);
  letter-spacing: var(--lz-tracking-address);
  color: var(--lz-fg-muted);
}
.lz-caption {
  font-family: var(--lz-sans);
  font-size: var(--lz-fs-caption);
  line-height: var(--lz-lh-meta);
  letter-spacing: var(--lz-tracking-caption);
  color: var(--lz-fg-muted);
}

/* -- Emphasis -------------------------------------------------- */
strong, .lz-medium { font-weight: 500; }
em, .lz-italic     { font-style: italic; font-weight: 400; }

/* -- Rules ----------------------------------------------------- */
.lz-rule           { border: 0; height: var(--lz-rule-w-thin); background: var(--lz-rule); }
.lz-rule-thick     { border: 0; height: var(--lz-rule-w-thick); background: var(--lz-rule); }
.lz-rule-faint     { border: 0; height: var(--lz-rule-w-thin); background: var(--lz-rule-thin); }

/* -- Links ----------------------------------------------------- */
a {
  color: var(--lz-ink);
  text-decoration: underline;
  text-decoration-color: var(--lz-oxblood);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 120ms ease;
}
a:hover { text-decoration-thickness: 2px; }

/* -- Inverse surface ------------------------------------------ */
.lz-inverse {
  background: var(--lz-bg-inverse);
  color: var(--lz-fg-inverse);
}
.lz-inverse a   { color: var(--lz-fg-inverse); }

/* -- Cream surface -------------------------------------------- */
.lz-surface-cream {
  background: var(--lz-bg-surface);
  color: var(--lz-fg);
}