/* ============================================================
   NEUROBEAUTY, Brand Foundations
   Palette: slightly-warm monochrome (light nude/skin tone).
   Fonts loaded via <link> in the consuming HTML.
   ============================================================ */

:root {
  /* ---------- Type families ---------- */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, sans-serif;

  /* ---------- DEFAULT palette, slightly-warm monochrome ---------- */
  --bg:        #F5F4F1;   /* page, barely-warm off-white      */
  --bg-cool:   #ECEAE5;   /* recessed panel                    */
  --bg-ice:    #E6E3DC;   /* soft greige block                 */
  --surface:   #FCFBF9;   /* cards / sheets                    */
  --ink:       #221F1B;   /* warm near-black charcoal          */
  --ink-2:     #4A463F;   /* secondary text                    */
  --ink-soft:  #837D73;   /* muted / captions                  */
  --line:      #E7E4DE;   /* hairline border                   */
  --line-2:    #D8D4CB;   /* stronger divider                  */
  --silver:    #BEB9AE;   /* metallic / taupe detail           */

  --accent:      #8C7B63; /* muted warm taupe (sparing)        */
  --accent-deep: #6F6049; /* hover on accent                   */
  --accent-rgb:  140,123,99; /* @kind color */
  --glow-1:      #EFEBE3; /* aura light                        */
  --glow-2:      #DFD6C7; /* aura mid                          */
  --glow-3:      #CBBCA4; /* aura core                         */
  --glow-rgb:    223,214,199; /* @kind color */
  --shadow-rgb:  34,31,27;

  /* Decorative film-grain texture (SVG data URI) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---------- Elevation (derives from theme) ---------- */
  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb),.05), 0 1px 1px rgba(var(--shadow-rgb),.04);
  --shadow-md: 0 10px 30px -12px rgba(var(--shadow-rgb),.16);
  --shadow-lg: 0 30px 60px -24px rgba(var(--shadow-rgb),.20);
  --shadow-glow: 0 24px 70px -30px rgba(var(--accent-rgb),.38);

  /* ---------- Spacing rhythm ---------- */
  --space-section: clamp(72px, 10vw, 160px);

  /* ---------- Semantic type tokens ---------- */
  --eyebrow-size: 12px;
  --eyebrow-track: .26em;
}

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

.t-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ink);
}

.t-lead {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.t-mono {
  font-family: var(--font-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}