/*
 * Fabbro Systems Design System v0.2.0
 * Canonical framework-agnostic implementation tokens.
 *
 * Explicit Figma typography is preserved directly.
 * Layout/control values are the v0.1 implementation baseline inferred
 * from the approved public-product composition and subsequent responsive-width validation.
 */

:root {
  --fs-color-bg: #000000;
  --fs-color-surface: #000000;
  --fs-color-text: #ffffff;
  --fs-color-text-secondary: #d0d0d0;
  --fs-color-text-muted: #a0a0a0;
  --fs-color-border: #252525;
  --fs-color-border-strong: #7f7f7f;

  --fs-font-primary: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-type-product-header-size: 36px;
  --fs-type-product-header-weight: 600;
  --fs-type-product-header-line-height: 1;
  --fs-type-product-header-tracking: 0.35em;

  --fs-type-hero-size: 64px;
  --fs-type-hero-weight: 900;
  --fs-type-hero-line-height: 1.12;
  --fs-type-hero-tracking: 0.20em;

  --fs-type-hero-sub-size: 32px;
  --fs-type-hero-sub-weight: 400;
  --fs-type-hero-sub-line-height: 1.3;
  --fs-type-hero-sub-tracking: 0;

  --fs-type-logo-caption-size: 24px;
  --fs-type-logo-caption-weight: 600;
  --fs-type-logo-caption-line-height: 1;
  --fs-type-logo-caption-tracking: 0.40em;

  --fs-type-nav-size: 14px;
  --fs-type-nav-weight: 600;
  --fs-type-button-size: 16px;
  --fs-type-button-weight: 600;
  --fs-type-body-size: 18px;
  --fs-type-body-line-height: 1.6;
  --fs-type-footer-size: 12px;
  --fs-type-footer-weight: 500;

  --fs-page-max: 1680px;
  --fs-page-gutter: 80px;
  --fs-header-height: 160px;
  --fs-hero-height: 480px;
  --fs-footer-height: 80px;

  --fs-space-1: 4px;
  --fs-space-2: 8px;
  --fs-space-3: 12px;
  --fs-space-4: 16px;
  --fs-space-5: 24px;
  --fs-space-6: 32px;
  --fs-space-7: 48px;
  --fs-space-8: 64px;
  --fs-space-9: 80px;
  --fs-space-10: 96px;

  --fs-radius-sm: 6px;
  --fs-radius-control: 8px;
  --fs-radius-lg: 12px;

  --fs-border-width: 1px;

  --fs-control-hero-height: 52px;
  --fs-control-header-height: 40px;
  --fs-control-active-nav-height: 32px;
  --fs-control-padding-inline: 24px;
  --fs-control-gap: 16px;
  --fs-family-mark-size: 24px;

  --fs-app-sidebar-width: 15.5rem;
  --fs-app-sidebar-collapsed-width: 4.5rem;
  --fs-app-sidebar-mobile-width: min(19rem, calc(100vw - 3rem));
  --fs-app-sidebar-breakpoint: 900px;
  --fs-app-nav-item-min-height: 2.55rem;
  --fs-app-nav-icon-size: 1.15rem;
  --fs-app-nav-active-indicator-width: 2px;

  --fs-motion-fast: 120ms;
  --fs-motion-normal: 180ms;
  --fs-motion-ease: ease;

  --fs-accent: #ffffff;
}

[data-fabbro-product="ariadne"] {
  --fs-accent: #0088ff;
}

[data-fabbro-product="kleos"] {
  --fs-accent: #cb30e0;
}

[data-fabbro-product="heracles"] {
  --fs-accent: #ff383c;
}

@media (max-width: 1024px) {
  :root {
    --fs-page-gutter: 40px;
  }
}

@media (max-width: 720px) {
  :root {
    --fs-page-gutter: 24px;
    --fs-header-height: 112px;
    --fs-hero-height: auto;
    --fs-footer-height: auto;
    --fs-type-product-header-size: 24px;
    --fs-type-hero-size: clamp(38px, 11vw, 52px);
    --fs-type-hero-sub-size: 21px;
  }
}