/* ==========================================================================
   TOKENS — Design Tokens (variáveis CSS globais)
   Baseado no design system TG Service Industrial
   ========================================================================== */

:root {
  /* ── Cores (Light / Sand — modo padrão do site) ──────────────────────────── */
  --color-background:          #f7f3ec;
  --color-surface:             #f7f3ec;
  --color-surface-low:         #efe9dc;
  --color-surface-container:   #ffffff;
  --color-surface-high:        #f1ebdd;
  --color-surface-highest:     #e7dfcd;
  --color-surface-bright:      #ffffff;

  --color-primary:             #ffb347;
  --color-primary-container:   #f5a623;
  --color-primary-dim:         #d98c12;
  --color-on-primary:          #241300;

  --color-secondary:           #c68302;
  --color-secondary-container: #ffb953;
  --color-on-secondary:        #241300;

  --color-tertiary:            #0f8fc4;
  --color-tertiary-container:  #3ac2ff;

  --color-on-surface:          #1c1a17;
  --color-on-surface-variant:  #5b5648;

  --color-outline:             #a89f8c;
  --color-outline-variant:     #ded5c2;

  --color-error:               #ba1a1a;
  --color-error-container:     #ffdad6;

  --color-white:               #ffffff;
  --color-black:                #000000;

  /* ── Cores (Dark — usadas via classe utilitária .dark-surface) ──────────── */
  --color-dark-background:         #131313;
  --color-dark-surface-low:        #1c1b1b;
  --color-dark-surface-container:  #201f1e;
  --color-dark-surface-high:       #2a2927;
  --color-dark-surface-highest:    #353331;
  --color-dark-surface-bright:     #3f3d3a;
  --color-dark-on-surface:         #f5f1ea;
  --color-dark-on-surface-variant: #cbbfa8;
  --color-dark-outline:            #9f8e7a;
  --color-dark-outline-variant:    #3a3630;

  /* ── Tipografia ─────────────────────────────────────────────────────────── */
  --font-headline: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --font-body:     'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Escala de tamanhos */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  4rem;      /* 64px */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ── Espaçamentos (base 8px) ────────────────────────────────────────────── */
  --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 */

  /* Section gap */
  --section-gap:        5rem;      /* 80px */
  --section-gap-lg:     7.5rem;    /* 120px */
  --container-max:      1900px;
  --gutter:             1.5rem;    /* 24px */
  --margin-desktop:     clamp(1rem, 7vw, 7.5rem);

  /* ── Border Radius ──────────────────────────────────────────────────────── */
  --radius-sm:   0.125rem;  /* 2px  */
  --radius:      0.25rem;   /* 4px  */
  --radius-md:   0.375rem;  /* 6px  */
  --radius-lg:   0.5rem;    /* 8px  */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-full: 9999px;

  /* ── Sombras / Elevação ─────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:     0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.1);
  --glow-primary: 0 0 16px rgba(245, 166, 35, 0.25);
  --glow-active:  0 0 24px rgba(245, 166, 35, 0.4);

  /* ── Transições ─────────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index ────────────────────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-header:  200;
  --z-modal:   300;
  --z-top:     400;
}