/* ============================================================
   Priscila Figueroa — Design System Tokens
   ============================================================
   "Biblioteca clásica con magia tenue + minimalismo Apple."
   Editorial · Cuidador + Creador · Slow brand · Sin ruido.
   ============================================================ */

/* ------- FONTS ------- */

/* Cormorant Garamond — serif editorial para títulos */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Source Sans 3 — sans humanista para body */
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------- TOKENS ------- */

:root {
  /* ===== COLOR ===== */

  /* Primary — Deep Plum (manuscrito antiguo iluminado) */
  --plum:        #5B3A6B;   /* signature plum */
  --plum-deep:   #3D2649;   /* manuscript shadow */
  --plum-soft:   #7E5C8E;   /* hover, accent on plum */
  --plum-mist:   #D8CBE0;   /* tint, faint backgrounds */

  /* Accent — Sage Green (calma, eucalipto apagado) */
  --sage:        #8A9A87;   /* signature sage */
  --sage-deep:   #647A60;   /* eucalipto profundo */
  --sage-mist:   #D5DDD2;   /* tint */

  /* Neutrals — papel, hueso, tinta */
  --cream:       #F5F1E8;   /* warm cream — page background */
  --paper:       #EFE9DB;   /* one shade darker, cards & frames */
  --bone:        #E6DECC;   /* divider/tint */
  --ink:         #1A1A1A;   /* charcoal — body type */
  --ink-soft:    #3A3A3A;   /* secondary type */
  --ink-mute:    #6B6760;   /* tertiary, captions */

  /* Magic — dorado tenue (Grand Central, NYPL bronce) */
  --gilt:        #B8975E;   /* gilt accent — sparingly */
  --gilt-soft:   #D7BE8E;   /* light gilt */

  /* Semantic */
  --bg:          var(--cream);
  --bg-soft:     var(--paper);
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --rule:        #C9C0AA;   /* hairline rule */
  --link:        var(--plum);

  /* ===== TYPE ===== */

  --font-serif:  "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:   "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — editorial, generous */
  --t-eyebrow:    0.75rem;    /* 12px — small caps labels */
  --t-caption:    0.8125rem;  /* 13px */
  --t-body-sm:    0.9375rem;  /* 15px */
  --t-body:       1.0625rem;  /* 17px — reading body */
  --t-lede:       1.25rem;    /* 20px — lede/subtitle */
  --t-h6:         1.125rem;
  --t-h5:         1.375rem;
  --t-h4:         1.75rem;
  --t-h3:         2.25rem;
  --t-h2:         3rem;
  --t-h1:         4rem;
  --t-display:    5.5rem;

  /* Line-height */
  --lh-tight:    1.08;   /* @kind other */
  --lh-snug:     1.2;    /* @kind other */
  --lh-cozy:     1.4;    /* @kind other */
  --lh-body:     1.6;    /* @kind other */
  --lh-loose:    1.75;   /* @kind other */

  /* Letter-spacing — wide tracking for small caps eyebrows */
  --tr-tight:    -0.015em;
  --tr-normal:   0;        /* @kind other */
  --tr-wide:     0.06em;
  --tr-eyebrow:  0.22em;

  /* ===== SPACE ===== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ===== RADII ===== */
  --r-0:   0;      /* @kind radius */
  --r-1:   2px;     /* hairline editorial */
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* ===== ELEVATION (soft, never bright) ===== */
  --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.03);
  --shadow-2: 0 6px 18px rgba(61, 38, 73, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-3: 0 18px 48px rgba(61, 38, 73, 0.10), 0 6px 12px rgba(26, 26, 26, 0.05);
  --shadow-book: 0 24px 60px rgba(61, 38, 73, 0.18), 0 8px 16px rgba(26, 26, 26, 0.08);

  /* ===== MOTION ===== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:    160ms;   /* @kind other */
  --dur-base:    280ms;   /* @kind other */
  --dur-slow:    520ms;   /* @kind other */
}

/* ------- BASE ------- */

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

/* Editorial helper classes — use these to compose pages */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--plum);
}

.lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-lede);
  line-height: var(--lh-cozy);
  color: var(--ink-soft);
  letter-spacing: var(--tr-tight);
}

.h-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--plum-deep);
  margin: 0;
}

.h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--plum-deep);
  margin: 0;
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: 0;
}

.h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-cozy);
  color: var(--ink);
  margin: 0;
}

.h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h5);
  line-height: var(--lh-cozy);
  color: var(--ink);
  margin: 0;
}

.body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-cozy);
  color: var(--ink-mute);
}

/* Hairline divider — editorial */
.rule {
  height: 1px;
  width: 100%;
  background: var(--rule);
  border: 0;
}

/* Pull-quote — italic Cormorant, plum */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: var(--lh-cozy);
  color: var(--plum-deep);
  letter-spacing: var(--tr-tight);
}

/* Sello — small uppercase mark used as editorial signature */
.sello {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--plum);
}