/* ============================================================
   variables.css — Tokens de design do sistema
   Fortal Rastreamentos
   ============================================================ */

:root {

  /* ──────────────────────────────
     CORES — Paleta principal
     ────────────────────────────── */
  --color-primary:        #E57C1F;
  --color-primary-hover:  #F29138;
  --color-primary-dark:   #C4671A;
  --color-primary-glow:   rgba(229, 124, 31, 0.18);
  --color-primary-subtle: rgba(229, 124, 31, 0.08);

  /* Fundos escuros */
  --color-dark:       #080A0D;
  --color-dark-soft:  #11151B;
  --color-graphite:   #1A2029;
  --color-graphite-2: #222A35;

  /* Superfícies claras */
  --color-surface:      #F5F6F7;
  --color-surface-2:    #ECEEF0;
  --color-white:        #FFFFFF;

  /* Textos */
  --color-text:         #20252C;
  --color-text-muted:   #69717D;
  --color-text-light:   #9CA3AF;
  --color-text-inverse: #FFFFFF;

  /* Bordas */
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-border-medium:  rgba(255, 255, 255, 0.16);
  --color-border-dark:    rgba(0, 0, 0, 0.10);

  /* Status */
  --color-success:  #22C55E;
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-warning:  #F59E0B;
  --color-danger:   #EF4444;


  /* ──────────────────────────────
     TIPOGRAFIA
     ────────────────────────────── */
  --font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md:   1.125rem;   /* 18px */
  --font-size-lg:   1.25rem;    /* 20px */
  --font-size-xl:   1.5rem;     /* 24px */
  --font-size-2xl:  1.875rem;   /* 30px */
  --font-size-3xl:  2.25rem;    /* 36px */
  --font-size-4xl:  3rem;       /* 48px */
  --font-size-5xl:  3.75rem;    /* 60px */

  /* Clamp fluido — hero heading */
  --font-hero-title:   clamp(2.8rem, 5vw, 5rem);
  --font-section-title: clamp(2rem, 3.5vw, 3.25rem);
  --font-card-title:   clamp(1rem, 2vw, 1.25rem);

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:   1.05;
  --line-height-snug:    1.15;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.12em;


  /* ──────────────────────────────
     ESPAÇAMENTO
     ────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Padding lateral responsivo */
  --padding-mobile:  20px;
  --padding-tablet:  32px;
  --padding-desktop: 48px;


  /* ──────────────────────────────
     LAYOUT
     ────────────────────────────── */
  --container-max:  1240px;
  --container-wide: 1360px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;


  /* ──────────────────────────────
     BORDAS
     ────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;


  /* ──────────────────────────────
     SOMBRAS
     ────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.24);
  --shadow-orange: 0 4px 24px rgba(229, 124, 31, 0.25);
  --shadow-orange-lg: 0 8px 40px rgba(229, 124, 31, 0.30);
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);


  /* ──────────────────────────────
     TRANSIÇÕES
     ────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ──────────────────────────────
     Z-INDEX
     ────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-overlay:  300;
  --z-toast:    400;
  --z-skip:     500;


  /* ──────────────────────────────
     COMPONENTES
     ────────────────────────────── */
  --btn-height:      48px;
  --btn-height-lg:   56px;
  --btn-height-sm:   40px;
  --btn-padding-h:   1.5rem;
  --btn-padding-h-lg: 2rem;

  /* ──────────────────────────────
     TAMANHOS FIXOS
     ────────────────────────────── */
  --header-height:   82px;
  --header-height-md: 88px;
}