/* ==========================================================================
   ZARKIO DESIGN SYSTEM — tokens
   Padrão da marca Zarkio (agência). A Zarkio Psi tem tokens próprios.
   Documentação: /design-system  ·  DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ---- Cores da marca (Kit Marca / Paleta de Cor) ---------------------- */
  --zk-black: #1d1d1d;        /* RGB 29 29 29   — preto Zarkio            */
  --zk-white: #f2f2f2;        /* RGB 242 242 242 — off-white Zarkio        */
  --zk-teal: #00707d;         /* RGB 0 112 125  — teal Zarkio (primária)   */

  /* ---- Escala teal (derivada da primária, usada no site) --------------- */
  --zk-teal-950: #002529;     /* teal profundo — títulos, header, gradiente */
  --zk-teal-900: #003a40;
  --zk-teal-700: #00707d;     /* = --zk-teal */
  --zk-teal-500: #2a8f9a;
  --zk-teal-200: #b5cdcf;     /* cards claros (fim do gradiente)            */
  --zk-teal-50:  #f2feff;     /* cards claros (início do gradiente)         */

  /* ---- Neutros ---------------------------------------------------------- */
  --zk-pure-white: #ffffff;
  --zk-gray-100: #f2f2f2;
  --zk-gray-300: #d9d9d9;
  --zk-gray-500: #969696;
  --zk-gray-700: #4a4a4a;
  --zk-gray-900: #1a1a1a;
  --zk-night: #0b1524;        /* céu do hero */

  /* ---- Papéis semânticos ------------------------------------------------ */
  --color-bg: var(--zk-white);
  --color-bg-dark: var(--zk-black);
  --color-surface: var(--zk-pure-white);
  --color-text: var(--zk-gray-900);
  --color-text-muted: var(--zk-gray-700);
  --color-heading: var(--zk-teal-950);
  --color-primary: var(--zk-teal);
  --color-primary-strong: var(--zk-teal-950);
  --color-on-dark: var(--zk-pure-white);
  --color-on-dark-muted: rgba(255, 255, 255, 0.78);
  --color-border: var(--zk-teal-950);
  --color-border-soft: rgba(0, 37, 41, 0.14);
  --color-focus: var(--zk-teal-500);
  --color-error: #c0392b;
  --color-success: #1e8a5a;

  /* ---- Gradientes ------------------------------------------------------- */
  --grad-brand: linear-gradient(120deg, var(--zk-teal-950) 0%, var(--zk-teal) 100%);
  --grad-brand-vertical: linear-gradient(180deg, var(--zk-teal-950) 0%, var(--zk-teal) 84%);
  --grad-card-light: linear-gradient(104deg, var(--zk-teal-50) 0%, var(--zk-teal-200) 100%);
  --grad-button-light: linear-gradient(165deg, #ffffff 0%, var(--zk-gray-500) 100%);
  --grad-hero: radial-gradient(ellipse at 70% 120%, #0d3b44 0%, var(--zk-night) 45%, #05080d 100%);

  /* ---- Tipografia ------------------------------------------------------- */
  --font-heading: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Escala fluida (mobile → desktop) */
  --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);     /* hero          */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-h4: 1.2rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-overline: 0.95rem;

  --lh-tight: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* ---- Espaçamento (base 4px) ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4rem, 3rem + 4vw, 6.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---- Raios ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;     /* botões, cards de serviço */
  --radius-lg: 14px;     /* cards de destaque        */
  --radius-xl: 28px;     /* fotos                    */
  --radius-pill: 999px;  /* chips do formulário      */

  /* ---- Sombras ---------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 37, 41, 0.12);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.25);

  /* ---- Movimento -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}