/* =====================================================================
   DIGITAL STUDIOS — Website Experience V1 · Tokens
   Layout: secções alternadas navy (imersão) e branco (leitura), com
   objetos em "placas" 2,5D que ganham espessura quando importam.
   ===================================================================== */
:root {
  color-scheme: light;

  /* Cor — identidade obrigatória */
  --navy: #081E55;
  --teal: #13D0D3;
  --white: #FEFEFE;

  /* Derivadas da identidade */
  --navy-950: #040F31;
  --navy-900: #061846;
  --navy-800: #0C2A6E;
  --navy-700: #163785;
  --navy-line: rgba(254, 254, 254, 0.12);
  --navy-muted: #A8B6D8;
  --teal-ink: #056A6D;          /* teal com contraste AA sobre branco e névoa clara */
  --teal-soft: rgba(19, 208, 211, 0.12);
  --teal-line: rgba(19, 208, 211, 0.45);
  --mist: #F1F5FB;              /* superfície clara com viés navy */
  --mist-2: #E5ECF7;
  --line: #D5DEED;
  --ink: #081E55;
  --ink-2: #43557F;
  --ink-3: #6B7A9C;

  /* Superfícies semânticas (o tema V2 redefine-as em páginas escuras) */
  --page: var(--white);
  --surface: var(--white);
  --fg-strong: var(--navy);
  --fill-strong: var(--navy);
  --on-fill: var(--white);
  --control: var(--navy);

  /* Semântica de estado (separada do acento) */
  --ok: #1F9D6B;
  --warn: #B7791F;
  --info: #3B5BDB;

  /* Tipografia */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: clamp(2.5rem, 5.2vw, 4.25rem);

  /* Espaço e forma */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r-s: 8px; --r-m: 14px; --r-l: 22px;
  --wrap: 1200px;
  --header-h: 68px;

  /* Profundidade 2,5D (sombras com tom navy, nunca cinzento puro) */
  --depth-1: 0 1px 0 rgba(8, 30, 85, 0.05), 0 10px 24px -14px rgba(8, 30, 85, 0.35);
  --depth-2: 0 1px 0 rgba(8, 30, 85, 0.06), 0 22px 40px -22px rgba(8, 30, 85, 0.45), 0 4px 10px -6px rgba(8, 30, 85, 0.2);
  --depth-3: 0 40px 80px -36px rgba(4, 15, 49, 0.7), 0 12px 24px -12px rgba(4, 15, 49, 0.45);
  --slab: 7px;                  /* espessura das placas */

  /* Signature Glow — APENAS destaques importantes e conclusões reais */
  --sig-glow: 0 0 0 1px rgba(19, 208, 211, 0.85), 0 0 22px 2px rgba(19, 208, 211, 0.38), 0 0 70px 6px rgba(19, 208, 211, 0.16);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}