/* L33 Medical — Colors & Type tokens
 * Source of truth: derived from Figma file (METADATA.md top-30 colors,
 * Raleway as primary face) + brand SVG logos. Hex values map 1:1 to the
 * RGB values that appear in the .fig pseudocode.
 */

/* Raleway — brand-supplied variable font (weight 100–900).
 * Local TTFs ship in /fonts; no external request. */
@font-face {
  font-family: "Raleway";
  src: url("./fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Raleway-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("./fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── BRAND CORE ──────────────────────────────────────────────── */
  /* The deep teal-navy that anchors all headlines & primary CTAs.   */
  --l33-ink:        #164052;   /* rgb(22,64,82)   */
  --l33-ink-soft:   #12313F;   /* rgb(18,49,63)   */
  --l33-ink-deep:   #0D3245;   /* rgb(13,50,69)   */

  /* The warm gold used for offers, premium chips, accents.          */
  --l33-gold:       #D4AE70;   /* rgb(212,174,112) — gold-light */
  --l33-gold-mid:   #CEA869;   /* rgb(206,168,105) */
  --l33-gold-deep:  #BD9A60;   /* rgb(189,154,96)  — primary gold */
  --l33-gold-warm:  #DDB36D;   /* rgb(221,179,109) */
  --l33-gold-soft:  #F4CD8C;   /* rgb(244,205,140) */

  /* The blush / peach used for emotive backgrounds & womens'-health. */
  --l33-blush:      #F99780;   /* rgb(249,151,128) — signature peach */
  --l33-blush-deep: #C48871;   /* rgb(196,136,113) */
  --l33-blush-mid:  #DEA483;   /* rgb(222,164,131) */
  --l33-rose:       #CD9C94;   /* rgb(205,156,148) — radial outer */
  --l33-rose-deep:  #8F5757;   /* rgb(143,87,87)   */
  --l33-blush-pale: #DEBDBD;   /* rgb(222,189,189) */

  /* Cool teal accent (occasional — paediatric / kids surface).       */
  --l33-mint:       #9FC8CE;   /* rgb(159,200,206) */

  /* Surfaces — porcelain whites & creams                             */
  --l33-paper:      #FFFFFF;
  --l33-cream:      #F8F0EF;   /* rgb(248,240,239) — main warm bg */
  --l33-cream-2:    #F8F4F4;   /* rgb(248,244,244) */
  --l33-cream-3:    #FAF3F5;   /* rgb(250,243,245) */
  --l33-line:       #D2D2D2;

  /* Functional alphas (used inside the signature glass cards)        */
  --l33-glass-warm:    rgba(224,198,198,0.6);
  --l33-glass-warm-0:  rgba(255,255,255,0.024);
  --l33-glass-rose:    rgba(143,87,87,0.46);
  --l33-glass-rose-0:  rgba(255,255,255,0.0184);
  --l33-glass-white:   rgba(255,255,255,0.8);

  /* Shadows — the brand's distinctive warm-brown drop shadow         */
  --l33-shadow-card:    16px 39px 24.9px rgba(110,66,67,0.4);
  --l33-shadow-glass:   89px 92px 67.3px rgba(115,72,69,0.16);
  --l33-shadow-inner:   inset 0 -26px 75.5px rgba(255,255,255,0.7);
  --l33-shadow-inner-rose: inset 0 -26px 75.5px rgba(255,255,255,0.35);
  --l33-shadow-pill:    5.8px 5.8px 5.8px rgba(110,66,67,0.4);
  --l33-shadow-text:    -1px 4px 4.8px rgba(0,0,0,0.13);

  /* Brand gradient backgrounds — verbatim from the Figma frames      */
  --l33-bg-cream:    radial-gradient(#FFFFFF 0%, #F8F0EF 100%);
  --l33-bg-blush:    radial-gradient(#F8F4F4 0%, #E6BAB2 100%);
  --l33-bg-rose:     radial-gradient(#F8F0EF 0%, #CD9C94 100%);
  --l33-bg-noise:    url("./assets/textures/noise.png");

  /* Radii — pulled from the actual frames                            */
  --l33-r-pill:    20px;
  --l33-r-card:    40px;     /* the warm white pill cards     */
  --l33-r-card-l:  68px;     /* mid-size glass cards          */
  --l33-r-card-xl: 148px;    /* largest hero glass blocks     */

  /* ─── TYPE ────────────────────────────────────────────────────── */
  --l33-font-sans: "Raleway", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Negative letter-spacing is core to the L33 voice — every headline
     in the file uses one of these three settings.                    */
  --l33-track-tight:    -0.04em;
  --l33-track-tighter:  -0.06em;
  --l33-track-tightest: -0.07em;

  /* Type scale (rounded from the px values seen in METADATA)         */
  --l33-fs-display: 122px;   /* hero / "Valódi odafigyeléssel" */
  --l33-fs-h1:      92px;    /* primary headline               */
  --l33-fs-h2:      80px;    /* dual-line headline             */
  --l33-fs-h3:      54px;    /* sub-headline                   */
  --l33-fs-h4:      42px;    /* supporting line                */
  --l33-fs-h5:      36px;
  --l33-fs-lead:    32px;
  --l33-fs-body:    24px;
  --l33-fs-button:  30px;
  --l33-fs-meta:    20px;

  /* Line-heights match Figma                                         */
  --l33-lh-tight:   1.0;
  --l33-lh-snug:    1.06;
  --l33-lh-normal:  1.12;
  --l33-lh-loose:   1.2;
}

/* ─── SEMANTIC ELEMENT STYLES ────────────────────────────────────── */
html, body {
  font-family: var(--l33-font-sans);
  color: var(--l33-ink);
  background: var(--l33-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .l33-h1 {
  font-weight: 700;
  font-size: var(--l33-fs-h1);
  line-height: var(--l33-lh-tight);
  letter-spacing: var(--l33-track-tighter);
  color: var(--l33-ink);
  margin: 0;
}

h2, .l33-h2 {
  font-weight: 700;
  font-size: var(--l33-fs-h2);
  line-height: var(--l33-lh-normal);
  letter-spacing: var(--l33-track-tighter);
  color: var(--l33-ink);
  margin: 0;
}

h3, .l33-h3 {
  font-weight: 700;
  font-size: var(--l33-fs-h3);
  line-height: var(--l33-lh-tight);
  letter-spacing: var(--l33-track-tighter);
  color: var(--l33-ink);
  margin: 0;
}

h4, .l33-h4 {
  font-weight: 700;
  font-size: var(--l33-fs-h4);
  line-height: var(--l33-lh-snug);
  letter-spacing: var(--l33-track-tighter);
  color: var(--l33-ink);
  margin: 0;
}

p, .l33-body {
  font-weight: 500;
  font-size: var(--l33-fs-body);
  line-height: 1.5;
  color: var(--l33-ink);
  margin: 0;
}

.l33-lead {
  font-weight: 700;
  font-size: var(--l33-fs-lead);
  line-height: var(--l33-lh-snug);
  letter-spacing: var(--l33-track-tighter);
  color: var(--l33-ink);
}

.l33-eyebrow {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l33-gold-deep);
}

/* ─── SIGNATURE COMPONENT PATTERNS ───────────────────────────────── */

/* The white pill behind a headline — appears on most posts           */
.l33-headline-pill {
  display: inline-flex;
  align-items: center;
  padding: 18px 32px;
  border-radius: var(--l33-r-card);
  background: var(--l33-glass-white);
  box-shadow: var(--l33-shadow-card);
}

/* The frosted-glass card — central recurring element                 */
.l33-glass {
  border-radius: var(--l33-r-card-xl);
  background: linear-gradient(var(--l33-glass-warm-0) 0%, var(--l33-glass-warm) 100%);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  box-shadow: var(--l33-shadow-glass), var(--l33-shadow-inner);
}

.l33-glass--rose {
  background: linear-gradient(var(--l33-glass-rose-0) 0%, var(--l33-glass-rose) 100%);
  box-shadow: var(--l33-shadow-glass), var(--l33-shadow-inner-rose);
}

/* Gold offer pill — verbatim from "Rákszűrés kedvezmény" frame       */
.l33-gold-pill {
  display: inline-flex;
  align-items: center;
  padding: 22px 58px;
  border-radius: var(--l33-r-card);
  background: var(--l33-gold-deep);
  color: var(--l33-cream-3);
  box-shadow: var(--l33-shadow-pill);
  font-weight: 700;
}

/* Primary URL/CTA capsule (small, deep teal)                         */
.l33-url-pill {
  display: inline-flex;
  align-items: center;
  padding: 18px 24px;
  border-radius: var(--l33-r-pill);
  background: var(--l33-ink);
  color: var(--l33-cream);
  font-weight: 700;
  font-size: var(--l33-fs-button);
  letter-spacing: var(--l33-track-tighter);
}

/* The omnipresent grain overlay                                      */
.l33-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.46;
  background: var(--l33-bg-noise) center / auto;
  mix-blend-mode: multiply;
}