/* =========================================================================
   tokens.css — Design tokens (variáveis CSS) do site AM Softwares
   -------------------------------------------------------------------------
   Toda decisão visual (cor, fonte, espaço, raio, sombra, easing, duração,
   z-index) vive aqui. Componentes consomem tokens, nunca valores brutos.
   -------------------------------------------------------------------------
   Convenção: --{categoria}-{nome}    →  primitivos
              --{categoria}-{papel}    →  semânticos (alias de primitivos)
   ========================================================================= */

:root {
  /* ── CORES — primitivas ─────────────────────────────────────────────── */
  --c-ink-900: #0a1626;          /* azul mais profundo que o bg */
  --c-ink-800: #0d1f33;          /* bg principal */
  --c-ink-700: #142b45;          /* surface elevado */
  --c-ink-600: #1a3454;          /* surface 2 (cards) */
  --c-ink-500: #244270;          /* surface 3 (hover) */
  --c-ink-400: #2f5080;          /* divisor/borda visível */

  --c-gold-700: #8c6128;         /* accent escuro */
  --c-gold-600: #a87832;         /* accent hover escuro */
  --c-gold-500: #C8933F;         /* accent principal (marca) */
  --c-gold-400: #d8a85f;         /* accent hover */
  --c-gold-300: #e8c485;         /* accent ativo/claro */
  --c-gold-200: #f3dcaa;         /* accent mais claro */

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

  /* ── CORES — semânticas (use estas nos componentes) ─────────────────── */
  --color-bg:              var(--c-ink-800);
  --color-bg-deep:         var(--c-ink-900);
  --color-surface:         var(--c-ink-700);
  --color-surface-2:       var(--c-ink-600);
  --color-surface-3:       var(--c-ink-500);

  --color-text:            var(--c-white);
  --color-text-muted:      rgba(255, 255, 255, 0.72);
  --color-text-subtle:     rgba(255, 255, 255, 0.50);
  --color-text-faint:      rgba(255, 255, 255, 0.32);

  --color-accent:          var(--c-gold-500);
  --color-accent-hover:    var(--c-gold-400);
  --color-accent-active:   var(--c-gold-300);
  --color-accent-dark:     var(--c-gold-700);
  --color-on-accent:       var(--c-ink-900);   /* texto sobre accent */

  --color-border:          rgba(200, 147, 63, 0.18);
  --color-border-strong:   rgba(200, 147, 63, 0.40);
  --color-border-subtle:   rgba(255, 255, 255, 0.08);

  --color-overlay:         rgba(10, 22, 38, 0.72);
  --color-overlay-soft:    rgba(10, 22, 38, 0.40);

  /* Estados */
  --color-success:         #4ade80;
  --color-warning:         #fbbf24;
  --color-danger:          #f87171;

  /* ── GRADIENTES (marca) ─────────────────────────────────────────────── */
  --gradient-accent:       linear-gradient(135deg, var(--c-gold-500) 0%, var(--c-gold-300) 100%);
  --gradient-bg:           linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-800) 50%, var(--c-ink-700) 100%);
  --gradient-glow:         radial-gradient(circle at 50% 0%, rgba(200, 147, 63, 0.18) 0%, transparent 60%);
  --gradient-spotlight:    linear-gradient(135deg, rgba(200, 147, 63, 0.10) 0%, transparent 50%);

  /* ── TIPOGRAFIA — famílias ─────────────────────────────────────────── */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  /* ── TIPOGRAFIA — escala (modular ratio ~1.25) ─────────────────────── */
  --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:   1.875rem;    /* 30px */
  --text-4xl:   2.25rem;     /* 36px */
  --text-5xl:   3rem;        /* 48px */
  --text-6xl:   3.75rem;     /* 60px */
  --text-7xl:   4.5rem;      /* 72px */
  --text-8xl:   6rem;        /* 96px — só pra hero */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-base:    1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tighter:  -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.12em;

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

  /* ── ESPAÇAMENTO (escala 4pt, com gaps maiores pra respiro) ────────── */
  --space-0:   0;
  --space-1:   0.25rem;      /*  4px */
  --space-2:   0.5rem;       /*  8px */
  --space-3:   0.75rem;      /* 12px */
  --space-4:   1rem;         /* 16px */
  --space-5:   1.5rem;       /* 24px */
  --space-6:   2rem;         /* 32px */
  --space-7:   2.5rem;       /* 40px */
  --space-8:   3rem;         /* 48px */
  --space-9:   4rem;         /* 64px */
  --space-10:  5rem;         /* 80px */
  --space-11:  6rem;         /* 96px */
  --space-12:  8rem;         /* 128px */
  --space-13:  10rem;        /* 160px */
  --space-14:  12rem;        /* 192px — só pra hero */

  /* Section padding (usado em <section>) */
  --section-y:        var(--space-11);
  --section-y-tight:  var(--space-9);
  --section-y-loose:  var(--space-13);

  /* ── BORDAS ─────────────────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  9999px;
  --border-1:     1px solid var(--color-border);
  --border-2:     2px solid var(--color-border);

  /* ── SOMBRAS (3 níveis + 1 glow de marca) ──────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-xl:    0 24px 60px rgba(0, 0, 0, 0.50);
  --shadow-glow:  0 0 32px rgba(200, 147, 63, 0.32);
  --shadow-glow-lg: 0 0 64px rgba(200, 147, 63, 0.48);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── ANIMAÇÃO — easings ────────────────────────────────────────────── */
  --ease-linear:    linear;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);       /* "expo out" — suave */
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* bounce sutil */
  --ease-elastic:   cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ── ANIMAÇÃO — durações ───────────────────────────────────────────── */
  --duration-instant:  80ms;
  --duration-fast:     180ms;
  --duration-base:     280ms;
  --duration-slow:     480ms;
  --duration-slower:   720ms;
  --duration-glacial:  1200ms;

  /* ── Z-INDEX ───────────────────────────────────────────────────────── */
  --z-base:        0;
  --z-elevated:    10;
  --z-dropdown:    100;
  --z-sticky:      500;
  --z-header:      1000;
  --z-modal:       2000;
  --z-toast:       3000;
  --z-skip:        9999;

  /* ── LARGURAS — container ──────────────────────────────────────────── */
  --container-xs:  20rem;       /* 320px */
  --container-sm:  40rem;       /* 640px */
  --container-md:  48rem;       /* 768px */
  --container-lg:  64rem;       /* 1024px */
  --container-xl:  80rem;       /* 1280px */
  --container-2xl: 90rem;       /* 1440px */
  --container-prose: 65ch;      /* largura ideal de leitura */

  /* ── TRANSIÇÕES pré-fabricadas ─────────────────────────────────────── */
  --transition-base:  all var(--duration-base) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out);
  --transition-color: color var(--duration-fast) var(--ease-out),
                      background-color var(--duration-fast) var(--ease-out),
                      border-color var(--duration-fast) var(--ease-out);

  /* ── EFEITOS — glass / blur ────────────────────────────────────────── */
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(24px);
  --glass-bg:        rgba(13, 31, 51, 0.72);
  --glass-border:    1px solid rgba(200, 147, 63, 0.25);
}