/* Thousand Faces AI — Design System "Atelier Noir" (1a)
   Design tokens · v1 · CSS custom properties
   Fonts: Bodoni Moda (display) + Jost (UI) — see fonts.css */

:root {
  /* ---- Color ---- */
  --tf-ink:        #17130E; /* primary text · dark surface */
  --tf-ink-2:      #211D18; /* elevated dark surface */
  --tf-ivory:      #F3EEE6; /* page background · text-on-dark */
  --tf-paper:      #FFFFFF; /* card surface */
  --tf-gold:       #B0894F; /* accent · kicker · active */
  --tf-taupe:      #57514A; /* secondary body text */
  --tf-mute:       #8A8178; /* muted · captions · labels */
  --tf-hairline:   #DED5C6; /* borders on light */
  --tf-line-dark:  #34302A; /* borders on dark */
  --tf-scrim:      rgba(23,19,14,.82); /* overlays · 18+ scrim */

  /* ---- Typography ---- */
  --tf-font-display: 'Spectral', Georgia, serif;
  --tf-font-ui:      'Jost', system-ui, sans-serif;

  --tf-fs-display: 62px; /* hero */
  --tf-fs-h1:      56px;
  --tf-fs-h2:      46px;
  --tf-fs-h3:      24px;
  --tf-fs-lead:    16.5px;
  --tf-fs-body:    15px;
  --tf-fs-small:   14px;
  --tf-fs-label:   11px;

  --tf-weight-display: 700;
  --tf-weight-ui:      400;
  --tf-weight-ui-med:  500;

  --tf-tracking-label: .20em; /* uppercase labels */
  --tf-tracking-kick:  .28em; /* gold kicker */

  /* ---- Space (8pt) ---- */
  --tf-space-1: 8px;
  --tf-space-2: 16px;
  --tf-space-3: 24px;
  --tf-space-4: 40px;
  --tf-gutter:  48px;   /* page horizontal padding */
  --tf-section: 88px;   /* vertical section rhythm */

  /* ---- Shape ---- */
  --tf-radius: 0px;                 /* sharp editorial corners */
  --tf-radius-pill: 999px;          /* only for round chrome (loupe) */
  --tf-border: 1px solid var(--tf-hairline);
  --tf-border-dark: 1px solid var(--tf-line-dark);
  --tf-shadow-frame: 0 34px 80px -24px rgba(0,0,0,.6);
}

/* ---- Primitives ---- */
.tf-kicker { font-family: var(--tf-font-ui); font-size: 12px; letter-spacing: var(--tf-tracking-kick); text-transform: uppercase; color: var(--tf-gold); }
.tf-label  { font-family: var(--tf-font-ui); font-size: var(--tf-fs-label); letter-spacing: var(--tf-tracking-label); text-transform: uppercase; }
.tf-display{ font-family: var(--tf-font-display); font-weight: var(--tf-weight-display); line-height: 1.05; letter-spacing: -.015em; }
.tf-serif  { font-family: var(--tf-font-display); font-weight: 600; }
.tf-body   { font-family: var(--tf-font-ui); font-size: var(--tf-fs-lead); line-height: 1.72; color: var(--tf-taupe); }

/* ---- Buttons ---- */
.tf-btn        { display:inline-block; font-family: var(--tf-font-ui); font-size: var(--tf-fs-label); letter-spacing: var(--tf-tracking-label); text-transform: uppercase; padding: 17px 32px; border-radius: var(--tf-radius); cursor: pointer; border: 0; }
.tf-btn--primary { background: var(--tf-ink); color: var(--tf-ivory); }
.tf-btn--onDark  { background: var(--tf-ivory); color: var(--tf-ink); }
.tf-btn--ghost   { background: transparent; color: var(--tf-ink); border: 1px solid var(--tf-ink); }
.tf-btn--text    { background: transparent; padding: 0 0 4px; border-bottom: 1px solid var(--tf-gold); }

/* ---- Form ---- */
.tf-field { font-family: var(--tf-font-ui); font-size: 15px; padding: 12px 2px; border: 0; border-bottom: var(--tf-border); background: transparent; color: var(--tf-ink); width: 100%; }
.tf-field::placeholder { color: var(--tf-mute); }

/* ---- Image / media container ---- */
.tf-media { border: var(--tf-border); overflow: hidden; background: var(--tf-ink); }
.tf-media > img { width:100%; height:100%; object-fit: cover; display:block; }