/* ============================================================
   PLINTH STUDIO - Design Tokens
   Premium AI Product Photography & 3D Visualization
   Dark editorial system · monochrome ink accent
   Fonts: Hanken Grotesk (substitute for Satoshi/General Sans/
   Neue Montreal) + JetBrains Mono for technical labels.
   ============================================================ */

:root {
  /* ---- Core surfaces (dark) ---- */
  --bg-0:        #0a0a0c;   /* page base, deepest */
  --bg-1:        #0e0e11;   /* primary section bg */
  --bg-2:        #131318;   /* elevated surface / card */
  --bg-3:        #191920;   /* hover surface / input */
  --bg-inset:    #08080a;   /* recessed wells */

  /* ---- Light inversion band (used sparingly) ---- */
  --bg-light:    #f4f2ee;   /* soft off-white */
  --bg-light-2:  #e9e6df;

  /* ---- Foreground ---- */
  --fg-0:        #f6f5f2;   /* primary text, soft off-white */
  --fg-1:        #b6b6bf;   /* secondary text */
  --fg-2:        #7c7c87;   /* tertiary / captions */
  --fg-3:        #50505a;   /* faint / disabled */
  --fg-on-light: #14141a;   /* text on light band */
  --fg-on-light-2:#55555f;

  /* ---- Accent: monochrome ink (cream on dark, black on light) ---- */
  --accent:      #f6f5f2;   /* cream - highest contrast on dark */
  --accent-hi:   #ffffff;   /* hover / lighter */
  --accent-lo:   #b6b6bf;   /* press / dimmer */
  --accent-ink:  #0a0a0c;   /* text on accent */
  --accent-soft: rgba(246, 245, 242, 0.10);
  --accent-glow: rgba(246, 245, 242, 0.22);

  /* ---- Lines & strokes ---- */
  --line-0:      rgba(255, 255, 255, 0.07);  /* hairline */
  --line-1:      rgba(255, 255, 255, 0.11);  /* standard border */
  --line-2:      rgba(255, 255, 255, 0.18);  /* strong / hover border */
  --line-light:  rgba(20, 20, 26, 0.12);

  /* ---- Semantic ---- */
  --ok:          #38c692;
  --warn:        #f0b545;
  --danger:      #f0604d;

  /* ---- Typography families ---- */
  --font-sans: "Hanken Grotesk", "Satoshi", "General Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Unified: serif now resolves to the same sans family for one consistent typeface */
  --font-serif: "Hanken Grotesk", "Satoshi", "General Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* ---- Type scale (fluid where useful) ---- */
  --t-display: clamp(3.2rem, 8.5vw, 7.5rem);   /* hero */
  --t-h1:      clamp(2.6rem, 5.5vw, 4.6rem);
  --t-h2:      clamp(2rem, 3.6vw, 3.1rem);
  --t-h3:      clamp(1.4rem, 2.2vw, 1.9rem);
  --t-h4:      1.25rem;
  --t-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-eyebrow: 0.75rem;

  /* ---- Weights ---- */
  --w-light:   300;
  --w-reg:     400;
  --w-med:     500;
  --w-semi:    600;
  --w-bold:    700;
  --w-x:       800;

  /* ---- Radii ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* ---- Spacing rhythm ---- */
  --space-section: clamp(2rem, 4vh, 3rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1440px;
  --maxw-narrow: 1040px;

  /* ---- Shadows / elevation (dark-tuned) ---- */
  --sh-sm:  0 1px 2px rgba(0,0,0,0.4);
  --sh-md:  0 12px 30px -12px rgba(0,0,0,0.7);
  --sh-lg:  0 30px 70px -24px rgba(0,0,0,0.8);
  --sh-glow: 0 18px 60px -18px var(--accent-glow);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.7s;
}

/* ============================================================
   Base element styling
   ============================================================ */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-reg);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-1);
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  color: var(--fg-0);
  font-weight: var(--w-semi);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* Eyebrow / technical label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-med);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}