/* =========================================================================
   Treasureforce Site Kit — tokens
   Design tokens (design-2 "Reel", style-1.css) + self-hosted Inter.
   SR: Boje, fontovi, radijusi i senke kao CSS promenljive.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Inter (self-hosted, WOFF2 in ../fonts/). local() first, then our file.
   Note: weights 500–700 use the weight-specific local names, because
   local("Inter") would match the Regular face and render a fake bold.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Inter"), local("Inter Regular"), local("Inter-Regular"),
       url("../fonts/Inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Inter Medium"), local("Inter-Medium"),
       url("../fonts/Inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Inter SemiBold"), local("Inter-SemiBold"),
       url("../fonts/Inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Inter Bold"), local("Inter-Bold"),
       url("../fonts/Inter-700.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------- */
:root {
  /* Core */
  --tf-bg: #0c0c0e;
  --tf-surface: #15151a;
  --tf-text: #ecebe6;
  --tf-black: #000;
  --tf-footer: #090909;
  --tf-divider: rgba(236, 235, 230, .14);

  /* Accent (gold) */
  --tf-accent: #d4a72c;
  --tf-accent-100: #fbf4e0;
  --tf-accent-200: #f5e6b8;
  --tf-accent-300: #ecd48a;
  --tf-accent-400: #e0bd57;
  --tf-accent-600: #b08a1f;
  --tf-accent-700: #866818;
  --tf-accent-800: #5b4611;
  --tf-accent-900: #33280a;
  --tf-accent-tint: rgba(212, 167, 44, .07);
  --tf-accent-wash: rgba(212, 167, 44, .12);

  /* Neutrals */
  --tf-n100: #f5f4f0;
  --tf-n200: #e6e5e0;
  --tf-n300: #cfcec8;
  --tf-n400: #b1b0aa;
  --tf-n500: #91908a;
  --tf-n600: #74736e;
  --tf-n700: #575651;
  --tf-n800: #3b3a37;
  --tf-n900: #232225;

  /* Type */
  --tf-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape */
  --tf-radius-sm: 4px;
  --tf-radius-md: 8px;
  --tf-radius-lg: 14px;
  --tf-radius-pill: 999px;

  /* Elevation (dark theme: hairline edge + ambient darkness) */
  --tf-shadow-sm: 0 0 0 1px #2a2a2e;
  --tf-shadow-md: 0 0 0 1px #3b3a37, 0 6px 18px rgba(0, 0, 0, .55);
  --tf-shadow-lg: 0 0 0 1px #575651, 0 16px 40px rgba(0, 0, 0, .65);

  /* Motion */
  --tf-ease: cubic-bezier(.2, .8, .2, 1);
  --tf-ease-media: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --tf-container: 1400px;
  --tf-gutter: 32px;
  --tf-sticky-top: 105px;
}

@media (max-width: 600px) {
  :root { --tf-gutter: 20px; }
}