/* ============================================================
   POSITEAM — Colors & Type
   "Bone on Ink" · Blueprint · wine-label restraint
   Big idea: "Nem eladunk — beavatunk."  Closing line: "A piac véletlen. Ez terv."
   ------------------------------------------------------------
   Fonts: Cormorant (display serif) + Jost (engineering sans).
   Both are Google Fonts — the exact families named in the brief,
   so no substitution. Loaded via @import below; for production,
   self-host from /fonts and remove the @import.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ---------- INK (foreground / text) ----------
     Deep, warm-toned anthracite — never pure black. */
  --ink-900: #15120D;   /* deepest — headings / brightest text */
  --ink-800: #241F17;   /* primary text (official ink, on light bg) */
  --ink-700: #3D362A;   /* secondary text */
  --ink-600: #625A48;   /* muted / captions / annotations */
  --ink-500: #8E856E;   /* faint / disabled text */

  /* ---------- BONE (backgrounds) ----------
     Warm, natural bone/sand — never cold white. */
  --bone-100: #FBF7EE;  /* brightest — raised panels / elevated surfaces */
  --bone-200: #F3ECDA;  /* default page background (official bone) */
  --bone-300: #E7DCC0;  /* deeper background / grounded sections */
  --bone-400: #D8C9A6;  /* strong hairline base */
  --bone-500: #BCA97D;  /* deep sand accents */

  /* ---------- GOLD (accent) ----------
     Antique, brushed — deepened for contrast on the light bone base.
     Used sparingly: one line, one mark, one word per view. */
  --gold:        #9C7A34;  /* primary accent (deepened for light bg) */
  --gold-bright: #B48F45;  /* hover / highlight */
  --gold-deep:   #6E5423;  /* pressed / on-bone surfaces */

  /* ---------- PRODUCT SIGNAL COLORS ----------
     Each product carries ONE signal hue, deepened/warmed to hold contrast
     on the light bone base. Used as a thin accent (grid, ticks, layer
     rules) on its own architecture page — never as fill. */
  --sig-pulse:     #A85953;  /* Pulse Spike — tompított piros · esti sejtvédelem */
  --sig-frequency: #6E8F52;  /* Frequency Microflora — élő zöld · a bél/alap */
  --sig-spg:       #96628F;  /* SPG Supra — magenta-ibolya · nappali energia */
  --sig-needmax:   #B9722A;  /* Needmax — meleg narancs · immun-motor */
  --sig-gaian:     #B08F1E;  /* Gaian No.8 — napsárga/mustár · bőr (külső) */
  --sig-lotion:    #9C7F4E;  /* Gaian Body Lotion — homok-pezsgő · táplálás */

  /* ---------- LINES (blueprint hairlines) ----------
     Drafting lines: ink drawn at low opacity over bone. */
  --line:        rgba(36, 31, 23, 0.09);  /* hairline grid / dividers */
  --line-strong: rgba(36, 31, 23, 0.18);  /* borders / card edges */
  --line-gold:   rgba(156, 122, 52, 0.45);  /* accent rules / ticks */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--bone-200);
  --bg-deep:     var(--bone-300);
  --bg-panel:    var(--bone-100);
  --bg-raised:   var(--bone-100);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg:          var(--ink-800);
  --fg-bright:   var(--ink-900);
  --fg-2:        var(--ink-700);
  --fg-3:        var(--ink-600);
  --fg-faint:    var(--ink-500);
  --accent:      var(--gold);
  --accent-hi:   var(--gold-bright);
  --accent-lo:   var(--gold-deep);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  /* Technical annotations reuse Jost, tracked + uppercase. No third family. */

  /* ---------- TYPE SCALE ----------
     Display serif runs LIGHT (300). Sans labels run UPPERCASE + tracked.
     Body copy sized up for long-form comfort on the light background. */
  --fs-display: clamp(3.6rem, 8vw, 7.2rem);     /* @kind font */ /* hero numerals / one-word statements */
  --fs-h1:      clamp(2.8rem, 5.8vw, 4.7rem); /* @kind font */
  --fs-h2:      clamp(2.15rem, 3.8vw, 3.15rem);     /* @kind font */
  --fs-h3:      clamp(1.6rem, 2.5vw, 2.1rem);   /* @kind font */
  --fs-lead:    clamp(1.3rem, 1.9vw, 1.7rem); /* @kind font */ /* intro paragraphs (serif) */
  --fs-body:    1.25rem;    /* 20px — sized up further for elderly-friendly reading @kind font */
  --fs-small:   1.0625rem;  /* 17px @kind font */
  --fs-label:   0.8125rem;  /* 13px — tracked uppercase annotations @kind font */
  --fs-tick:    0.75rem;    /* 12px — blueprint coordinate ticks @kind font */

  /* ---------- TRACKING ---------- */
  --track-display: -0.01em;  /* serif headings: nearly neutral @kind font */
  --track-label:   0.3em;   /* uppercase Jost labels — wide drafting tracking @kind font */
  --track-tick:    0.16em;   /* @kind font */

  /* ---------- LEADING ---------- */
  --lh-display: 1.04;  /* @kind font */
  --lh-head:    1.14;   /* @kind font */
  --lh-body:    1.9;  /* @kind font */

  /* ---------- SPACING (8pt base, blueprint module) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 192px;

  /* ---------- RADII (minimal — wine-label sharpness) ---------- */
  --r-none: 0px;   /* default: blueprint corners are SHARP */
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 999px;

  /* ---------- SHADOWS (almost none — depth comes from value, not blur) ---------- */
  --shadow-soft: 0 24px 60px -24px rgba(0,0,0,0.7);
  --shadow-lift: 0 40px 100px -40px rgba(0,0,0,0.85);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */ /* slow, settled */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur-fast: 280ms;   /* @kind other */
  --dur:      560ms;   /* @kind other */
  --dur-slow: 1100ms;  /* @kind other */ /* reveals breathe */

  /* ---------- LAYOUT ---------- */
  --measure: 64ch;        /* max reading width @kind spacing */
  --container: 1200px;    /* content max-width @kind spacing */
  --gutter: clamp(24px, 5vw, 88px); /* @kind spacing */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply with .ps- prefix or directly
   ============================================================ */

.ps-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-bright);
}
.ps-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-head);
  letter-spacing: var(--track-display);
  color: var(--fg-bright);
}
.ps-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  color: var(--fg-bright);
}
.ps-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg);
}
.ps-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--fg-2);
}
.ps-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
.ps-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--fg-2);
}
/* Blueprint annotation label — the brand's signature micro-type */
.ps-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.ps-tick {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-tick);
  letter-spacing: var(--track-tick);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ============================================================
   GRAIN — the texture that sits over everything.
   Drop <div class="ps-grain"></div> as a fixed overlay, or apply
   the background to a ::after. SVG fractal noise, no image file.
   ============================================================ */
.ps-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nNCcgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
}