/* ==========================================================================
   FC LOCAÇÃO DE EQUIPAMENTOS — Design Tokens
   Sistema de design centralizado. Toda mudança de identidade visual
   deve passar por este arquivo.
   ========================================================================== */

:root {
  /* -------- BRAND COLORS -------- */
  --fc-yellow:        #FFD200;
  --fc-yellow-dark:   #E5BC00;
  --fc-yellow-soft:   #FEF3C7;

  /* -------- NEUTRALS -------- */
  --black:            #000000;
  --black-soft:       #0A0A0A;
  --night:            #111111;
  --graphite:         #191919;
  --steel:            #1F1F1F;
  --slate:            #2A2A2A;

  --gray-900:         #2B2B2B;
  --gray-800:         #3B3B3B;
  --gray-700:         #4A4A4A;
  --gray-600:         #6B6B6B;
  --gray-500:         #8A8A8A;
  --gray-400:         #B5B5B5;
  --gray-300:         #D4D4D4;
  --gray-200:         #E5E5E5;
  --gray-100:         #F2F2F2;
  --gray-50:          #FAFAFA;

  --white:            #FFFFFF;
  --warm-white:       #FFF8F2;

  /* -------- SEMANTIC -------- */
  --color-bg:         var(--white);
  --color-bg-alt:     var(--gray-50);
  --color-bg-dark:    var(--black);
  --color-bg-darker:  var(--graphite);
  --color-bg-cta:     var(--fc-yellow);

  --color-text:       var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-text-soft:  var(--gray-500);
  --color-text-inv:   var(--white);
  --color-text-inv-soft: rgba(255,255,255,0.72);

  --color-heading:    #1A1A1A;
  --color-link:       var(--gray-700);
  --color-link-hover: var(--fc-yellow-dark);

  --color-border:     #E5E5E5;
  --color-border-dark: rgba(255,255,255,0.10);

  /* -------- TYPOGRAPHY -------- */
  --font-sans:        'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:     'Inter', 'Roboto', sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (modular, 1.250 ratio) */
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   1.875rem;  /* 30px */
  --fs-3xl:   2.25rem;   /* 36px */
  --fs-4xl:   3rem;      /* 48px */
  --fs-5xl:   3.75rem;   /* 60px */
  --fs-6xl:   4.5rem;    /* 72px */

  /* Fluid hero title */
  --fs-hero:  clamp(2.25rem, 5vw + 1rem, 4.5rem);
  --fs-h1:    clamp(2rem, 3.5vw + 0.75rem, 3.25rem);
  --fs-h2:    clamp(1.625rem, 2.5vw + 0.5rem, 2.5rem);
  --fs-h3:    clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  --fs-h4:    clamp(1.125rem, 1vw + 0.5rem, 1.375rem);

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.8;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --tracking-tight:  0;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.16em;

  /* -------- SPACING (4pt grid) -------- */
  --sp-0:   0;
  --sp-1:   0.25rem;   /* 4 */
  --sp-2:   0.5rem;    /* 8 */
  --sp-3:   0.75rem;   /* 12 */
  --sp-4:   1rem;      /* 16 */
  --sp-5:   1.25rem;   /* 20 */
  --sp-6:   1.5rem;    /* 24 */
  --sp-8:   2rem;      /* 32 */
  --sp-10:  2.5rem;    /* 40 */
  --sp-12:  3rem;      /* 48 */
  --sp-16:  4rem;      /* 64 */
  --sp-20:  5rem;      /* 80 */
  --sp-24:  6rem;      /* 96 */
  --sp-32:  8rem;      /* 128 */

  /* Fluid section padding */
  --section-py:  clamp(3rem, 6vw, 6rem);
  --section-px:  clamp(1.25rem, 4vw, 2.5rem);

  /* -------- CONTAINER -------- */
  --container-xs:  640px;
  --container-sm:  768px;
  --container-md:  1024px;
  --container-lg:  1200px;
  --container-xl:  1320px;
  --container-max: 1440px;

  /* -------- RADIUS -------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* -------- SHADOW -------- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 8px 20px rgba(20,25,40,0.08), 0 2px 6px rgba(20,25,40,0.06);
  --shadow-lg:  0 18px 40px rgba(20,25,40,0.10), 0 6px 14px rgba(20,25,40,0.06);
  --shadow-xl:  0 28px 60px rgba(20,25,40,0.14), 0 10px 20px rgba(20,25,40,0.08);
  --shadow-glow-yellow: 0 12px 32px rgba(250,204,21,0.35);

  /* -------- MOTION -------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;
  --t-slower:  600ms;
  --t-slowest: 900ms;

  /* -------- LAYERS -------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   500;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* -------- HEADER -------- */
  --header-h:        86px;
  --header-h-mobile: 68px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}