/* Inter — local font faces (weights used in the project) */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Open Sans Condensed — used only by the "Tools" wordmark in the header. */
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('../fonts/open-sans-condensed-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — Ninja Tools
   Paleta: ADR-004 (âncora na logo da AgênciaNinja)
   Sistema visual: DESIGN.md (raio, tipografia, espaçamento, semântica)
   ───────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Colors: Brand ─────────────────────────────────────────────────────── */
  --primary: #3ee0b8;
  --on-primary: #1a1a1a;
  --primary-active: #7aedd8;
  --primary-neutral: #9de9d7;
  --primary-pale: #d1f7ee;

  /* ── Colors: Surface ───────────────────────────────────────────────────── */
  --canvas: #ffffff;
  --canvas-soft: #f0f2f4;

  /* ── Colors: Text ──────────────────────────────────────────────────────── */
  --ink: #1a1a1a;
  --ink-deep: #163300;
  --body: #454745;
  --mute: #868685;

  /* ── Colors: Semantic — Positive ───────────────────────────────────────── */
  --positive: #2ead4b;
  --positive-deep: #054d28;

  /* ── Colors: Semantic — Warning ────────────────────────────────────────── */
  --warning: #ffd11a;
  --warning-deep: #b86700;
  --warning-content: #4a3b1c;

  /* ── Colors: Semantic — Negative ───────────────────────────────────────── */
  --negative: #d03238;
  --negative-deep: #a72027;
  --negative-darkest: #a7000d;
  --negative-bg: #320707;

  /* ── Typography: Font families ─────────────────────────────────────────── */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Open Sans Condensed', 'Inter', system-ui, sans-serif;

  /* ── Typography: Display sizes ─────────────────────────────────────────── */
  --text-display-mega: 7.875rem;
  /* 126px */
  --text-display-xxl: 6rem;
  /* 96px  */
  --text-display-xl: 4rem;
  /* 64px  */
  --text-display-lg: 2.9375rem;
  /* 47px  */
  --text-display-md: 2.5rem;
  /* 40px  */
  --text-display-sm: 2rem;
  /* 32px  */
  --text-display-xs: 1.5rem;
  /* 24px  */

  /* ── Typography: Body sizes ────────────────────────────────────────────── */
  --text-body-lg: 1.25rem;
  /* 20px */
  --text-body-md: 1rem;
  /* 16px */
  --text-body-sm: 0.875rem;
  /* 14px */
  --text-caption: 0.75rem;
  /* 12px */

  /* ── Typography: Weights ───────────────────────────────────────────────── */
  --weight-hero: 900;
  --weight-strong: 600;
  --weight-regular: 400;

  /* ── Typography: Line heights ──────────────────────────────────────────── */
  --lh-tight: 0.85;
  /* hero displays: mega, xxl, xl, md */
  --lh-display: 1.5;
  /* display-lg */
  --lh-compact: 1.2;
  /* display-sm */
  --lh-relaxed: 1.3;
  /* display-xs */
  --lh-body: 1.5;
  /* body-lg, body-md */
  --lh-sm: 1.43;
  /* body-sm */
  --lh-caption: 1.33;
  /* caption */

  /* ── Typography: Letter spacing ────────────────────────────────────────── */
  --ls-display-lg: -0.108px;
  --ls-display-sm: -0.96px;
  --ls-display-xs: -0.48px;
  --ls-normal: 0;

  /* ── Spacing (4 px base) ───────────────────────────────────────────────── */
  --space-xxs: 0.125rem;
  /* 2px  */
  --space-xs: 0.25rem;
  /* 4px  */
  --space-sm: 0.5rem;
  /* 8px  */
  --space-md: 0.75rem;
  /* 12px */
  --space-lg: 1rem;
  /* 16px */
  --space-xl: 1.5rem;
  /* 24px */
  --space-2xl: 2rem;
  /* 32px */
  --space-3xl: 3rem;
  /* 48px */

  /* ── Border radius ─────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 0.5rem;
  /* 8px  */
  --radius-md: 0.75rem;
  /* 12px */
  --radius-lg: 1rem;
  /* 16px */
  --radius-xl: 1.5rem;
  /* 24px — signature button / card radius */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ── Header ────────────────────────────────────────────────────────────── */
  --header-brand: #5c5c5c;
  --header-divider: #cacaca;

  /* ── Sidebar ───────────────────────────────────────────────────────────── */
  --sidebar-width: 16.5rem;
  --sidebar-width-collapsed: 4.5rem;
  --header-height: 3.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Ponte para o Tabler
   O Tabler é a base de componentes; a marca continua mandando na cor.
   Toda cor do site nasce dos tokens acima — nenhum valor literal aqui.
   ───────────────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme='light'] {
  --tblr-primary: var(--primary);
  --tblr-primary-rgb: 62, 224, 184;
  --tblr-primary-fg: var(--on-primary);
  --tblr-link-color: var(--ink);
  --tblr-link-hover-color: var(--ink);

  --tblr-body-bg: var(--canvas-soft);
  --tblr-body-color: var(--body);
  --tblr-secondary: var(--mute);
  --tblr-muted: var(--mute);
  --tblr-heading-color: var(--ink);

  --tblr-success: var(--positive);
  --tblr-warning: var(--warning);
  --tblr-danger: var(--negative);

  --tblr-font-sans-serif: var(--font-body);
  --tblr-body-font-size: var(--text-body-md);

  /* DESIGN.md: raio generoso é assinatura da marca. */
  --tblr-border-radius: var(--radius-md);
  --tblr-border-radius-sm: var(--radius-sm);
  --tblr-border-radius-lg: var(--radius-lg);
  --tblr-border-radius-xl: var(--radius-xl);
}