/* ============================================================
   TOKENS — the whole identity lives here.
   Single committed theme: obsidian slab on a bone ground.
   ============================================================ */

:root{
  /* — ground & ink — */
  --ink:        #0B0B0C;   /* slab */
  --ink-2:      #141315;
  --bone:       #F2EEE7;   /* page ground */
  --bone-hi:    #FAF8F4;
  --sand:       #DDD3C3;
  --sand-deep:  #C9BCA6;
  --clay:       #A96F45;   /* the one accent */
  --clay-soft:  #C89468;
  --espresso:   #43301F;

  /* — text on each ground — */
  --on-dark:        #F2EEE7;
  --on-dark-mute:   rgba(242, 238, 231, .60);
  --on-dark-faint:  rgba(242, 238, 231, .34);
  --line-dark:      rgba(242, 238, 231, .13);
  --on-light:       #16151A;
  --on-light-mute:  rgba(22, 21, 26, .56);
  --line-light:     rgba(22, 21, 26, .13);

  /* — glass (Apple-style, used only on the dark slab) — */
  --glass:      rgba(255, 255, 255, .055);
  --glass-hi:   rgba(255, 255, 255, .11);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-blur: blur(22px) saturate(180%);

  /* — type — */
  --display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  /* stays Latin even when --ui is swapped for Arabic on /ar/ */
  --ui-latin: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(3.1rem, 8.1vw, 7.4rem);
  --fs-h2:      clamp(2.05rem, 4.4vw, 3.75rem);
  --fs-lead:    clamp(0.98rem, 1.05vw, 1.12rem);
  --fs-label:   0.7rem;

  /* — motion — */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* — space — */
  --gutter: clamp(20px, 4.6vw, 76px);
  --slab-inset: clamp(8px, 1vw, 14px);
  --slab-radius: clamp(22px, 2.4vw, 34px);

  /* — the furniture's own palette —
     The SVG pieces paint themselves from these, so the configurator can
     recolour a chair by setting four custom properties on its container. */
  --fab-1:    #FFFDF9;   /* upholstery, lit face */
  --fab-2:    #DCD1BE;   /* upholstery, shaded face */
  --fab-seat: #F1EADD;   /* seat cushion */
  --fab-seam: #C4B69E;   /* stitch lines */
  --tim-1:    #6B4A31;   /* timber, lit */
  --tim-2:    #43301F;   /* timber, shade */

  /* — texture — */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}