/* ============================================================
   The Mix Plant — MixPlant Transfers
   Core design system: type, color, spacing tokens.
   Monochrome with a single gold accent (#C8B68A).
   ============================================================ */

/* ---- Whyte type family (web-optimized woff2 subset) ---- */
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-Book.woff2') format('woff2');
  font-weight: 450; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-Regular.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-Medium.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-BookItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('/fonts/Whyte-MediumItalic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}

:root {
  /* ---- Core monochrome palette ---- */
  --black:        #0a0a0a;   /* near-black base, softer than pure #000 */
  --black-pure:   #000000;
  --ink:          #111111;   /* panel / card surfaces on black */
  --ink-raised:   #161616;   /* raised surfaces */
  --line:         #262626;   /* hairline borders */
  --line-soft:    #1c1c1c;
  --smoke:        #6e6e6e;   /* muted text */
  --ash:          #9a9a9a;   /* secondary text */
  --bone:         #e8e6e1;   /* primary text (warm off-white, not stark) */
  --white:        #ffffff;

  /* ---- The one accent: gold ---- */
  --gold:         #C8B68A;
  --gold-bright:  #d8c9a4;   /* hover / highlight */
  --gold-dim:     #9c8d68;   /* pressed / subtle */
  --gold-ghost:   rgba(200, 182, 138, 0.12); /* tints, glows */
  --gold-line:    rgba(200, 182, 138, 0.32);

  /* ---- Type ---- */
  --font: 'Whyte', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --w-thin: 100;
  --w-xlight: 200;
  --w-light: 300;
  --w-book: 400;
  --w-regular: 500;
  --w-medium: 600;

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Radius / motion ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;

  --maxw: 560px;        /* booking flow is a focused single column */
  --maxw-wide: 920px;
}