/*
 * FTOS brand foundation.
 *
 * This file intentionally defines tokens only. It is safe to load alongside the
 * untouched motion clone because it does not override existing animation selectors.
 * Brand passes should consume these variables from a separate FTOS override layer.
 */

@font-face {
  font-family: "FTOS Bebas Neue";
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FTOS Bebas Neue";
  src: url("../fonts/bebas-neue-extended.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FTOS Jura";
  src: url("../fonts/jura-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "FTOS Jura";
  src: url("../fonts/jura-extended.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "FTOS Jura";
  src: url("../fonts/jura-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Core palette */
  --ftos-graphite: #312923;
  --ftos-bismarck-maroon: #810600;
  --ftos-maroon: #c91000;
  --ftos-orange: #e85102;
  --ftos-pale-orange: #ff9d69;
  --ftos-ivory: #fffcf1;

  /* Semantic color roles */
  --ftos-color-bg: #211c18;
  --ftos-color-bg-deep: #181410;
  --ftos-color-surface: var(--ftos-graphite);
  --ftos-color-surface-raised: #3a302a;
  --ftos-color-surface-subtle: rgb(255 252 241 / 0.045);
  --ftos-color-text: var(--ftos-ivory);
  --ftos-color-text-muted: rgb(255 252 241 / 0.68);
  --ftos-color-text-faint: rgb(255 252 241 / 0.46);
  --ftos-color-border: rgb(255 252 241 / 0.14);
  --ftos-color-border-strong: rgb(255 252 241 / 0.26);
  --ftos-color-action: var(--ftos-orange);
  --ftos-color-action-hover: var(--ftos-maroon);
  --ftos-color-focus: var(--ftos-pale-orange);
  --ftos-color-danger: var(--ftos-maroon);

  /* Condensed industrial typography stack. Local font files are added in Brand Pass. */
  --ftos-font-display: "FTOS Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
  --ftos-font-body: "FTOS Jura", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --ftos-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ftos-text-display-xl: clamp(4.5rem, 9vw, 8.25rem);
  --ftos-text-display-lg: clamp(3.25rem, 6vw, 5rem);
  --ftos-text-heading-lg: clamp(2rem, 3.3vw, 3rem);
  --ftos-text-heading-md: clamp(1.5rem, 2.4vw, 2.25rem);
  --ftos-text-lead: clamp(1.125rem, 1.6vw, 1.5rem);
  --ftos-text-body: clamp(1rem, 1.1vw, 1.125rem);
  --ftos-text-small: 0.875rem;
  --ftos-text-label: 0.75rem;

  /* 4px base / 8px rhythm */
  --ftos-space-1: 0.25rem;
  --ftos-space-2: 0.5rem;
  --ftos-space-3: 0.75rem;
  --ftos-space-4: 1rem;
  --ftos-space-6: 1.5rem;
  --ftos-space-8: 2rem;
  --ftos-space-12: 3rem;
  --ftos-space-16: 4rem;
  --ftos-space-20: 5rem;
  --ftos-space-28: 7rem;
  --ftos-space-36: 9rem;
  --ftos-space-40: 10rem;

  /* Geometry and elevation */
  --ftos-radius-none: 0;
  --ftos-radius-control: 0.25rem;
  --ftos-radius-card: 0.75rem;
  --ftos-radius-media: 1.5rem;
  --ftos-radius-round: 999px;
  --ftos-shadow-card: 0 18px 48px rgb(0 0 0 / 0.2);
  --ftos-shadow-deep: 0 24px 80px rgb(0 0 0 / 0.34);
  --ftos-shadow-focus: 0 0 0 3px rgb(255 157 105 / 0.28);
  --ftos-shadow-action-glow: 0 14px 42px rgb(232 81 2 / 0.24);

  /* Motion tokens complement the existing GSAP/Lenis timings. */
  --ftos-motion-fast: 160ms;
  --ftos-motion-base: 220ms;
  --ftos-motion-reveal: 520ms;
  --ftos-ease-industrial: cubic-bezier(0.2, 0.75, 0.2, 1);

  /* Layout */
  --ftos-container: 90rem;
  --ftos-gutter: clamp(1.5rem, 5vw, 6rem);
  --ftos-section-space: clamp(5rem, 10vw, 10rem);

  /* Brand atmospheres */
  --ftos-gradient-brand: linear-gradient(
    90deg,
    var(--ftos-bismarck-maroon) 0%,
    var(--ftos-maroon) 34%,
    var(--ftos-orange) 68%,
    var(--ftos-pale-orange) 100%
  );
  --ftos-gradient-dark-depth:
    radial-gradient(ellipse at 86% 18%, rgb(129 6 0 / 0.35), transparent 34%),
    radial-gradient(ellipse at 14% 110%, rgb(201 16 0 / 0.2), transparent 46%),
    linear-gradient(108deg, #181410 0%, var(--ftos-graphite) 52%, #241d19 100%);
}