/* ==========================================================================
   Luisa Muskus — Design System Tokens
   Pediatra · Personal Brand
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */
/* Brand faces bundled locally: JIGSAW (chunky display) + QESTRAFIN (script).*/
/* Body uses Nunito from Google Fonts.                                       */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

@font-face {
  font-family: 'Jigsaw';
  src: url('./fonts/JIGSAW.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  /* Exclude Latin-Extended accented chars (á é í ó ú ñ ü etc.) — the Jigsaw
     demo file does not include them; the browser will fall back to the next
     family in the stack (Archivo Black) for those codepoints. */
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: 'Qestrafin';
  src: url('./fonts/Qestrafin_DEMO_VERSION.otf') format('opentype'),
       url('./fonts/Qestrafin_DEMO_VERSION.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Qestrafin';
  src: url('./fonts/Qestrafin_Italic_DEMO_VERSION.otf') format('opentype'),
       url('./fonts/Qestrafin_Italic_DEMO_VERSION.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ====================================================================
     COLOR — Core palette (from brand guide)
     ==================================================================== */
  --lm-pink:        #e77b95;  /* rose pink — primary brand color          */
  --lm-magenta:     #cc72b8;  /* magenta — secondary / gradient partner   */
  --lm-blush:       #f3c0c7;  /* soft blush — pale pink background        */
  --lm-peach:       #fba074;  /* peach — warm accent                      */

  /* ---- Extended / derived --------------------------------------------- */
  --lm-hot-pink:    #f24aa6;  /* saturated pink seen in sample posts      */
  --lm-sun-yellow:  #fddc5c;  /* sunny yellow — highlight + callout tint  */
  --lm-cream:       #fbf3e4;  /* paper / cream background                 */
  --lm-paper:       #fff9f0;  /* warmer paper tone                        */
  --lm-ink:         #1a1a1a;  /* body text — near-black                   */
  --lm-ink-soft:    #3a2a2f;  /* warm dark for secondary text             */
  --lm-muted:       #7a6a6e;  /* muted warm grey                          */
  --lm-line:        #e9dcd0;  /* hairline / divider                       */
  --lm-white:       #ffffff;

  /* ---- Semantic (foreground / background) ----------------------------- */
  --fg-1: var(--lm-ink);              /* primary text                     */
  --fg-2: var(--lm-ink-soft);         /* secondary text                   */
  --fg-3: var(--lm-muted);             /* tertiary / captions             */
  --fg-brand: var(--lm-pink);
  --fg-on-pink: var(--lm-white);

  --bg-1: var(--lm-paper);             /* default page background        */
  --bg-2: var(--lm-cream);             /* elevated surface               */
  --bg-brand: var(--lm-pink);
  --bg-accent: var(--lm-sun-yellow);
  --bg-highlight: var(--lm-blush);

  /* ---- Gradients ------------------------------------------------------ */
  --grad-brand: linear-gradient(135deg, var(--lm-pink) 0%, var(--lm-magenta) 100%);
  --grad-warm:  linear-gradient(135deg, var(--lm-peach) 0%, var(--lm-pink) 100%);
  --grad-sun:   linear-gradient(135deg, var(--lm-sun-yellow) 0%, var(--lm-peach) 100%);

  /* ====================================================================
     TYPOGRAPHY
     Brand uses:
       · JIGSAW  — chunky all-caps display (substituted: Fraunces 900 SC)
       · QERAFIN — script/hand display     (substituted: Caveat)
       · Body    — friendly sans (chosen:   Nunito)
     ==================================================================== */
  --font-display: 'Jigsaw', 'Archivo Black', Georgia, serif;  /* chunky heads  */
  --font-script:  'Qestrafin', 'Qerafin', 'Brush Script MT', cursive;
  --font-body:    'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale ----------------------------------------------------- */
  --fs-hero:   clamp(3.5rem, 8vw, 6.5rem);   /* 56–104px display          */
  --fs-h1:     clamp(2.5rem, 5vw, 4rem);     /* 40–64px                   */
  --fs-h2:     clamp(1.75rem, 3.5vw, 2.5rem);/* 28–40px                   */
  --fs-h3:     1.5rem;                       /* 24px                      */
  --fs-h4:     1.25rem;                      /* 20px                      */
  --fs-body:   1rem;                         /* 16px                      */
  --fs-small:  0.875rem;                     /* 14px                      */
  --fs-micro:  0.75rem;                      /* 12px                      */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.12em;

  /* ====================================================================
     SPACING · RADIUS · SHADOWS
     ==================================================================== */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Soft, warm shadows — no hard drops */
  --shadow-sm: 0 1px 2px rgba(204, 114, 184, 0.08);
  --shadow-md: 0 6px 20px -8px rgba(231, 123, 149, 0.28);
  --shadow-lg: 0 18px 40px -16px rgba(204, 114, 184, 0.32);
  --shadow-polaroid: 0 12px 28px -10px rgba(40, 20, 30, 0.22);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med:  260ms;
  --dur-slow: 420ms;
}

/* ==========================================================================
   BASE STYLES — semantic tags
   ========================================================================== */
html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
body { font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin: 0;
}

p   { margin: 0; line-height: var(--lh-body); }
small, .caption { font-size: var(--fs-small); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-micro);
  color: var(--fg-brand);
}

.display-script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 0.9;
  color: var(--fg-brand);
}

.display-chunky {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* Highlighted text — yellow marker style used in posts */
.hl-yellow {
  background: linear-gradient(180deg, transparent 55%, var(--lm-sun-yellow) 55%);
  padding: 0 0.1em;
}

/* Underline accent — red/pink hand-drawn feel */
.u-accent {
  background-image: linear-gradient(var(--lm-hot-pink), var(--lm-hot-pink));
  background-repeat: no-repeat;
  background-size: 100% 0.18em;
  background-position: 0 100%;
  padding-bottom: 0.05em;
}

code, kbd { font-family: var(--font-mono); font-size: 0.9em; }