/* ============================================================================
   CARDUME — Design Tokens (fonte única de verdade)
   Marca: Cardume Eventos & Marketing · Tema: mar / abismo / cardume
   Uso: importe este arquivo na landing page e no portfólio.
        Estilize SEMPRE pelos tokens semânticos (--bg, --text, --accent…),
        nunca pelos valores crus. Troca de tema = trocar só os semânticos.
   ============================================================================ */

:root {
  /* ---- Paleta crua (não usar direto em componentes) ---------------------- */
  /* Abisso — a base do mundo da marca (do mais fundo ao mais raso) */
  --c-abyss-900: #060F17;   /* fundo mais profundo */
  --c-abyss-800: #0A1822;   /* base padrão (dark) */
  --c-abyss-700: #0F2531;   /* superfície elevada */
  --c-abyss-600: #14323F;   /* card */
  --c-abyss-500: #1B4250;   /* borda/traço no escuro */

  /* Petróleo / teal — a água */
  --c-petrol-700: #0C3E3D;
  --c-petrol-500: #12615C;
  --c-teal-400:   #1E857D;

  /* Ciano bioluminescente — o brilho vivo (acento / CTA / links) */
  --c-cyan-300: #57E0D4;
  --c-cyan-200: #8FF3EA;
  --c-teal-ink: #0C6E67;    /* acento em contraste sobre fundo claro */

  /* Azul-marca — extraído do símbolo (sonar / escamas) */
  --c-brand-400: #3E9BD8;
  --c-brand-600: #2C6FB0;

  /* Prata-peixe & neutros */
  --c-silver-200: #DCE7EA;
  --c-silver-300: #C4D4D8;  /* texto sobre escuro */
  --c-silver-500: #8CA3AB;  /* texto secundário no escuro */
  --c-sand-200:   #E8E0D0;  /* neutro quente, uso pontual */
  --c-paper:      #EFF3F3;  /* off-white frio (base light) */
  --c-paper-pure: #FFFFFF;
  --c-ink-700:    #26383E;  /* texto secundário no claro */

  /* ---- Gradientes ------------------------------------------------------- */
  --grad-abyss:   linear-gradient(180deg, #0A1822 0%, #060F17 100%);
  --grad-descent: radial-gradient(120% 100% at 50% 0%, #123542 0%, #0A1822 45%, #060F17 100%);
  --grad-water:   linear-gradient(160deg, #0C3E3D 0%, #0A1822 70%);
  --grad-brand:   linear-gradient(135deg, #3E9BD8 0%, #2C6FB0 100%);
  --grad-biolum:  radial-gradient(circle at 50% 50%, rgba(143,243,234,.9) 0%, rgba(87,224,212,.35) 40%, rgba(87,224,212,0) 72%);

  /* ---- Tipografia ------------------------------------------------------- */
  --font-display: "Futura","Century Gothic","Avenir Next","Nunito Sans",ui-sans-serif,system-ui,sans-serif;
  --font-body: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;

  --step--1: clamp(.78rem, .74rem + .18vw, .86rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.4rem, 2rem + 6vw, 7rem);

  --tracking-wide: .18em;   /* eyebrows / rótulos caixa-alta */
  --tracking-mega: .28em;   /* wordmark */

  /* ---- Forma & profundidade -------------------------------------------- */
  --r-0: 0px;
  --r-1: 3px;
  --r-2: 8px;
  --r-pill: 999px;
  --facet: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

  --space-1: .4rem; --space-2: .8rem; --space-3: 1.2rem; --space-4: 2rem;
  --space-5: 3rem;  --space-6: 5rem;  --space-7: 8rem;

  --shadow-deep: 0 24px 60px -20px rgba(0,0,0,.7);
  --glow-cyan: 0 0 40px rgba(87,224,212,.35);
  --maxw: 1120px;

  /* ---- Semânticos (USAR ESTES) — default = tema claro ------------------- */
  --bg: var(--c-paper);
  --bg-raised: var(--c-paper-pure);
  --surface: #F6F9F9;
  --border: #D3E0E0;
  --text: var(--c-abyss-800);
  --text-dim: var(--c-ink-700);
  --accent: var(--c-teal-ink);        /* links / detalhes de acento (contraste) */
  --accent-fill: var(--c-cyan-300);   /* preenchimento decorativo bioluminescente */
  --accent-ink: #04121A;              /* texto sobre acento */
  --brand: var(--c-brand-600);
  --hero-bg: var(--grad-descent);     /* herói é sempre abissal, nos dois temas */
  --hero-text: var(--c-silver-200);
}

/* Tema escuro — o mundo "verdadeiro" da marca (abissal) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--c-abyss-800);
    --bg-raised: var(--c-abyss-700);
    --surface: var(--c-abyss-600);
    --border: var(--c-abyss-500);
    --text: var(--c-silver-300);
    --text-dim: var(--c-silver-500);
    --accent: var(--c-cyan-300);
    --accent-fill: var(--c-cyan-300);
    --accent-ink: #04121A;
    --brand: var(--c-brand-400);
  }
}

/* Override explícito pelo toggle do leitor (vence a media query nos 2 sentidos) */
:root[data-theme="light"] {
  --bg: var(--c-paper); --bg-raised: var(--c-paper-pure); --surface: #F6F9F9;
  --border: #D3E0E0; --text: var(--c-abyss-800); --text-dim: var(--c-ink-700);
  --accent: var(--c-teal-ink); --accent-fill: var(--c-cyan-300); --accent-ink: #04121A;
  --brand: var(--c-brand-600);
}
:root[data-theme="dark"] {
  --bg: var(--c-abyss-800); --bg-raised: var(--c-abyss-700); --surface: var(--c-abyss-600);
  --border: var(--c-abyss-500); --text: var(--c-silver-300); --text-dim: var(--c-silver-500);
  --accent: var(--c-cyan-300); --accent-fill: var(--c-cyan-300); --accent-ink: #04121A;
  --brand: var(--c-brand-400);
}