/* ==========================================================================
   KIRIMURÊ — Laboratório Digital Marinho
   Estilos do Site
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis e Identidade Visual (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Paleta Oficial da Marca */
  --color-primary: #013241;        /* Azul-petróleo (cor principal) */
  --color-primary-dark: #00222c;   /* Azul-petróleo profundo */
  --color-cream: #F7EFE2;          /* Creme (fundos claros e textos) */
  --color-cream-soft: rgba(247, 239, 226, 0.88);
  --color-cream-muted: rgba(247, 239, 226, 0.65);
  --color-cream-dim: rgba(247, 239, 226, 0.5);

  --color-amber: #FCAE26;          /* Âmbar (destaques, troféu, botões primários) */
  --color-amber-hover: #ffba3f;    /* Âmbar iluminado */

  /* Cores Complementares */
  --color-turquoise: #00C8C4;      /* Turquesa */
  --color-aqua: #62DCE4;           /* Azul-água */
  --color-sky: #51C1E6;            /* Azul-celeste */

  /* Paleta oceânica profunda (seção Sobre nós) */
  --color-deep-ocean: #002535;     /* Azul oceânico profundo */

  /* Coluna d'água — rampa monotônica de profundidade.
     Cada token é sempre mais escuro que o anterior, garantindo que
     rolar para baixo nunca "clareie" o oceano. */
  --depth-0: #00465e;              /* superfície iluminada */
  --depth-1: #003d52;              /* pelágico (topo do mergulho) */
  --depth-2: #00222f;              /* eufótico profundo */
  --depth-3: #001521;              /* crepuscular */
  --depth-4: #000a12;              /* abissal */
  --depth-5: #00050a;              /* hadal */
  --depth-6: #000207;              /* leito marinho */

  /* Tipografia */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Estrutura */
  --header-height: 68px;
  --max-width-content: 1380px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Transições */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Controle de profundidade oceânica */
  --ocean-depth: 0;         /* 0 = superfície, 1 = fundo (escopo da seção Sobre) */
  --ocean-light: 1;         /* 1 = máxima luz, 0 = escuro */

  /* Profundidade global da página (0 = superfície, 1 = leito marinho).
     Atualizada por js/features/ocean-depth.js a cada scroll. */
  --depth: 0;

  /* Fração de profundidade em que cada camada do campo d'água ainda aparece */
  --depth-shallow-fade: 4.6;
  --depth-mid-fade: 2.35;
  --depth-deep-fade: 1.18;
}