/* ============================================================
   AzonCity — Colors & Typography Foundation
   Source of truth for tokens. Import in any prototype:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* -------- FONTS -------- */
/* Clash Grotesk — display / headlines / numbers */
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/ClashGrotesk-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/ClashGrotesk-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/ClashGrotesk-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("fonts/ClashGrotesk-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Lexend — body / UI / longform */
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   :root TOKENS
   ============================================================ */
:root {
  /* ---- BRAND (azul · identidade) ---- */
  --brand:           #2563EB;
  --brand-hover:     #1D4ED8;
  --brand-press:     #1E40AF;
  --brand-surface:   #EFF6FF;
  --brand-dark:      #1E3A8A;  /* fundo pricing telecom */

  /* ---- ACTION (laranja · CTA) ---- */
  --action:          #FF6A00;
  --action-hover:    #E55F00;
  --action-press:    #CC5500;
  --action-surface:  #FFF4ED;  /* use só em badges status "in_progress" */

  /* ---- SUCCESS (verde · preço/dinheiro/positivo) ---- */
  --success:         #22C55E;
  --success-hover:   #16A34A;
  --success-press:   #15803D;
  --success-surface: #DCFCE7;
  --success-dark:    #052E16;
  --success-ink:     #0F7B55;  /* status "completed" (verde escuro p/ leitura) */

  /* ---- WARNING / DANGER ---- */
  --warning:         #92400E;
  --warning-surface: #FEF3C7;
  --warning-mid:     #F59E0B;  /* status "rescheduled" */
  --danger:          #B91C1C;
  --danger-hover:    #991B1B;
  --danger-surface:  #FEE2E2;

  /* ---- BASE (60% branco + 10% cinza) ---- */
  --bg:              #FFFFFF;
  --bg-soft:         #F9FAFB;
  --surface:         #F3F4F6;
  --surface-2:       #E5E7EB;
  --border:          #E5E7EB;
  --border-strong:   #D1D5DB;
  --divider:         #F3F4F6;

  /* ---- INK ---- */
  --ink:             #111827;
  --ink-muted:       #374151;
  --ink-subtle:      #6B7280;
  --ink-disabled:    #9CA3AF;
  --on-brand:        #FFFFFF;  /* texto sobre azul */
  --on-action:       #FFFFFF;  /* texto sobre laranja */
  --on-dark:         #FFFFFF;  /* texto sobre azul-dark */
  --on-dark-muted:   rgba(255,255,255,0.75);

  /* ---- GRADIENTES ---- */
  --grad-brand:    linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  --grad-brand-2:  linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  --grad-brand-3:  linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
  --grad-action:   linear-gradient(135deg, #FF6A00 0%, #E55F00 100%);
  --grad-hero:     linear-gradient(180deg, #EFF6FF 0%, #FFF4ED 100%);

  /* ---- TIPOGRAFIA · FAMILIES ---- */
  --font-display: "Clash Grotesk", "Inter", system-ui, sans-serif;
  --font-sans:    "Lexend", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---- TIPOGRAFIA · WEIGHTS ---- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---- ESCALA TIPOGRÁFICA ---- */
  --fs-display-xl: 48px;   /* hero principal desktop */
  --fs-display-lg: 36px;   /* H1 forte / hero mobile */
  --fs-display-md: 28px;   /* H2 de seção */
  --fs-display-sm: 22px;   /* H3 / título card grande */
  --fs-xl:   20px;
  --fs-lg:   18px;
  --fs-base: 16px;
  --fs-sm:   14px;
  --fs-xs:   13px;
  --fs-2xs:  12px;
  --fs-3xs:  11px;

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --tracking-tightest: -0.03em;  /* hero v2.1 — display Bold */
  --tracking-tighter:  -0.02em;  /* H1, big numbers */
  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-overline: 0.08em;   /* uppercase pill / overline */

  /* ---- RAIOS ---- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  28px;   /* pills grandes (oferta CTA) */
  --r-pill: 999px;

  /* ---- SOMBRAS ---- */
  --shadow-xs:  0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm:  0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:  0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg:  0 12px 28px rgba(17, 24, 39, 0.12);
  --shadow-xl:  0 24px 48px rgba(17, 24, 39, 0.18);
  --shadow-card-hover: 0 8px 24px rgba(37, 99, 235, 0.12);
  --shadow-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* ---- ESPAÇAMENTO (grid 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- MOVIMENTO ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 240ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Apply these directly on elements:
     <h1 class="t-display-xl">…</h1>
     <p class="t-body">…</p>
   ============================================================ */

/* DISPLAY · Clash Grotesk · pesos altos */
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.t-display-sm {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* BODY · Lexend */
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--ink-subtle);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.t-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* DUAL-COLOR HEADLINE HELPERS
   Use as <h1 class="t-display-lg"><span class="ink-brand">Sua agenda no ar</span>
   <span class="ink-action">em até 24 horas.</span></h1> */
.ink-brand   { color: var(--brand); }
.ink-action  { color: var(--action); }
.ink-success { color: var(--success); }
.ink-success-dark { color: var(--success-hover); }
.ink-muted   { color: var(--ink-muted); }
.ink-subtle  { color: var(--ink-subtle); }

/* TABULAR NUMBERS for tables / prices */
.t-tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   ELEMENT DEFAULTS (opt-in: add `.azon-defaults` to <body>)
   ============================================================ */
.azon-defaults {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.azon-defaults h1 { font: var(--fw-bold) var(--fs-display-xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tightest); }
.azon-defaults h2 { font: var(--fw-bold) var(--fs-display-lg)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tighter); }
.azon-defaults h3 { font: var(--fw-semibold) var(--fs-display-md)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); }
.azon-defaults h4 { font: var(--fw-semibold) var(--fs-display-sm)/var(--lh-snug) var(--font-display); }
.azon-defaults p  { font: var(--fw-regular) var(--fs-base)/var(--lh-relaxed) var(--font-sans); color: var(--ink-muted); }
.azon-defaults code, .azon-defaults pre { font-family: var(--font-mono); font-size: 0.92em; }