/* ============================================================
   TECH+ SUMMIT — Design Tokens
   Derivados exclusivamente das peças do Canva (design "TECH", 5 páginas).
   Nenhum valor foi herdado de CSS pré-existente do site.

   Modelo de cor: CLARO como base, ESCURO como momento de marca.
   Fonte:         Montserrat (substituta web da Canva Sans usada nas artes).
   Cantos:        retos — o selo de data e a moldura neon do Canva não têm raio.
   ============================================================ */

/* ---------- 1. PRIMITIVAS DE COR ------------------------------
   Rampas geradas em OKLCH a partir de âncoras medidas nos arquivos
   do Canva. O passo âncora preserva o hexadecimal exato da peça.
   Âncoras:
     blue-500  #0A87E7  início do gradiente do lettering SUMMIT
     teal-500  #00BCB3  meio do mesmo gradiente
     green-400 #00E95F  fim do gradiente
     navy-900  #0B3A4B  cor do texto "01/OUT" sobre o selo
   ------------------------------------------------------------- */
:root {
  /* blue */
  --c-blue-50: #e9f8ff;
  --c-blue-100: #d2eeff;
  --c-blue-200: #8eddff;
  --c-blue-300: #6dc6ff;
  --c-blue-400: #49acff;
  --c-blue-500: #0a87e7;
  --c-blue-600: #007cd7;
  --c-blue-700: #0062b2;
  --c-blue-800: #004889;
  --c-blue-900: #002d5c;
  --c-blue-950: #001937;
  /* teal */
  --c-teal-50: #e9faf8;
  --c-teal-100: #d0f3ef;
  --c-teal-200: #83ece4;
  --c-teal-300: #5cd7ce;
  --c-teal-400: #27bfb7;
  --c-teal-500: #00bcb3;
  --c-teal-600: #008f88;
  --c-teal-700: #00746d;
  --c-teal-800: #005651;
  --c-teal-900: #003834;
  --c-teal-950: #00201d;
  /* green */
  --c-green-50: #e4fee6;
  --c-green-100: #c7facc;
  --c-green-200: #5efb82;
  --c-green-300: #22e562;
  --c-green-400: #00e95f;
  --c-green-500: #00b32c;
  --c-green-600: #00981b;
  --c-green-700: #007a0f;
  --c-green-800: #005a0a;
  --c-green-900: #003a09;
  --c-green-950: #022008;
  /* navy */
  --c-navy-50: #f5f6f6;
  --c-navy-100: #e9ebec;
  --c-navy-200: #d2d8da;
  --c-navy-300: #b7c2c8;
  --c-navy-400: #99abb4;
  --c-navy-500: #7d95a0;
  --c-navy-600: #617f8c;
  --c-navy-700: #436776;
  --c-navy-800: #254d5d;
  --c-navy-900: #0b3a4b;
  --c-navy-950: #001d2c;
  /* neutral — dessaturado a partir do matiz navy, nunca cinza puro */
  --c-neutral-50: #eef7fc;
  --c-neutral-100: #e3ecf0;
  --c-neutral-200: #d0d8dd;
  --c-neutral-300: #b9c2c6;
  --c-neutral-400: #a1a9ad;
  --c-neutral-500: #8a9296;
  --c-neutral-600: #737b7f;
  --c-neutral-700: #576369;
  --c-neutral-800: #3e494e;
  --c-neutral-900: #252f34;
  --c-neutral-950: #101a1f;

  /* Cores literais das peças — não interpolar, são valores de marca */
  --c-void: #000544;        /* fundo de página no Canva */
  --c-circuit-shadow: #062138;
  --c-circuit-mid: #0f4b4b;
  --c-circuit-steel: #14557d;
  --c-circuit-cyan: #32f3f4;
  --c-neon: #36e375;        /* faixa decorativa (recolorida de #00FFB3) */
  --c-neon-halo: #dfffd8;

  /* Logo Assespro — uso institucional, fora do sistema de UI */
  --c-assespro-red: #d0202d;
  --c-assespro-blue: #0090e0;
  --c-assespro-navy: #005070;
}

/* ---------- 2. GRADIENTES -------------------------------------
   O gradiente é o ativo de marca mais forte das peças: aparece no
   lettering SUMMIT, no selo de data e nas bordas do fundo.
   Medido ponto a ponto nos PNGs exportados.
   ------------------------------------------------------------- */
:root {
  --grad-brand: linear-gradient(180deg, #0a87e7 0%, #00bcb3 50%, #00e95f 100%);
  --grad-brand-45: linear-gradient(135deg, #0a87e7 0%, #00bcb3 50%, #00e95f 100%);
  --grad-brand-x: linear-gradient(90deg, #0a87e7 0%, #00bcb3 50%, #00e95f 100%);
  /* variante do selo — começa mais claro e termina antes do verde puro */
  --grad-badge: linear-gradient(180deg, #0096db 0%, #00bbb5 50%, #00dd81 100%);
  /* atmosfera do fundo escuro */
  --grad-void: radial-gradient(120% 90% at 80% 0%, #14557d 0%, transparent 55%),
               radial-gradient(100% 80% at 10% 100%, #0f4b4b 0%, transparent 60%),
               linear-gradient(180deg, #000544 0%, #062138 100%);
  /* CTA: recorte do gradiente que mantém o texto navy acima de 4,5:1
     em qualquer ponto (o azul puro cairia para 3,3:1). */
  --grad-cta: linear-gradient(90deg, #00bcb3 0%, #00e95f 100%);
  --grad-hairline: linear-gradient(90deg, transparent, #36e375 20%, #32f3f4 80%, transparent);
}

/* ---------- 3. PAPÉIS SEMÂNTICOS — TEMA CLARO (padrão) --------
   O site é claro por padrão. O universo escuro do Canva é reservado
   a hero, CTA e faixas de destaque (ver .theme-void).
   ------------------------------------------------------------- */
:root,
.theme-light {
  color-scheme: light;

  --bg: #ffffff;
  --bg-sunken: var(--c-neutral-50);
  --bg-raised: #ffffff;
  --bg-subtle: var(--c-neutral-100);
  --bg-inverse: var(--c-void);

  --fg: var(--c-navy-950);       /* 17.4:1 sobre branco */
  --fg-muted: var(--c-navy-800); /*  9.0:1 sobre branco, 8.4:1 sobre o fundo rebaixado */
  --fg-faint: var(--c-navy-700); /*  6.1:1 sobre branco, 5.7:1 sobre o fundo rebaixado —
                                    escolhido para passar em AA nas DUAS superfícies claras */
  --fg-inverse: #ffffff;
  --fg-on-accent: var(--c-navy-900);

  --border: var(--c-neutral-200);
  --border-strong: var(--c-neutral-300);
  --border-accent: var(--c-teal-500);

  /* ações — em fundo claro os tons puros do Canva não passam em contraste,
     por isso o texto e os links usam os passos 700 das mesmas rampas */
  --accent: var(--c-teal-500);        /* decoração: filetes, bordas, superfícies */
  --accent-text: var(--c-teal-700);   /* texto: 5,6:1 — o teal puro reprova em branco */
  --accent-fg: var(--c-navy-900);
  --link: var(--c-blue-700);         /* 6.2:1 */
  --link-hover: var(--c-blue-800);
  --success: var(--c-green-700);     /* 5.5:1 */
  --focus: var(--c-blue-600);

  --shadow-sm: 0 1px 2px rgb(0 29 44 / 0.06), 0 1px 1px rgb(0 29 44 / 0.04);
  --shadow-md: 0 4px 12px rgb(0 29 44 / 0.08), 0 1px 3px rgb(0 29 44 / 0.06);
  --shadow-lg: 0 16px 40px rgb(0 29 44 / 0.12), 0 4px 10px rgb(0 29 44 / 0.06);
}
.theme-light { color: var(--fg); }

/* ---------- 4. PAPÉIS SEMÂNTICOS — TEMA ESCURO (destaque) -----
   .theme-void apenas redefine variáveis; quem pinta o fundo é
   .surface-void (em components.css). Separar as duas coisas evita
   que a classe de tema dispute a cascata com componentes que já
   têm fundo próprio, como .card.

   Não é um "dark mode" de sistema: é um bloco de marca deliberado.
   ------------------------------------------------------------- */
.theme-void {
  color-scheme: dark;

  --bg: var(--c-void);
  --bg-sunken: #00042f;
  --bg-raised: rgb(255 255 255 / 0.05);
  --bg-subtle: rgb(255 255 255 / 0.08);
  --bg-inverse: #ffffff;

  --fg: #ffffff;                     /* 19:1 sobre #000544 */
  --fg-muted: rgb(255 255 255 / 0.74);
  --fg-faint: rgb(255 255 255 / 0.55);
  --fg-inverse: var(--c-navy-950);
  --fg-on-accent: var(--c-navy-900);

  --border: rgb(255 255 255 / 0.14);
  --border-strong: rgb(255 255 255 / 0.28);
  --border-accent: var(--c-neon);

  --accent: var(--c-green-400);      /* 11,6:1 sobre o fundo */
  --accent-text: var(--c-green-400);
  --accent-fg: var(--c-navy-900);
  --link: var(--c-teal-300);         /* 10.9:1 */
  --link-hover: var(--c-green-300);
  --success: var(--c-green-400);
  --focus: var(--c-neon);

  --shadow-sm: none;
  --shadow-md: 0 8px 32px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.6);

  /* estabelece a cor herdável: filhos que não referenciam var(--fg)
     herdariam a cor do body e sumiriam sobre o fundo escuro */
  color: var(--fg);
}

/* ---------- 5. TIPOGRAFIA -------------------------------------
   As peças usam Canva Sans, indisponível fora do Canva.
   Montserrat é a substituta adotada: mesma família geométrica,
   'a' de dois andares. Ocupa ~8% mais largura que a original —
   prever isso em títulos que precisam caber em uma linha.

   Pesos observados nas artes:
     800 ExtraBold — "SAVE THE DATE", "01/OUT", "Local: Sebrae/PR"
     500 Medium    — "3º encontro de computação avançada..."
     400 Regular   — "Rua Caeté, 150 - Prado Velho"
   ------------------------------------------------------------- */
:root {
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Escala fluida. Os degraus de display espelham as proporções medidas
     nas peças: o "01/OUT" a 88px sobre 1080 de largura equivale a --fs-6xl. */
  --fs-2xs: 0.6875rem;                          /* 11 */
  --fs-xs: 0.75rem;                             /* 12 */
  --fs-sm: 0.875rem;                            /* 14 */
  --fs-base: 1rem;                              /* 16 */
  --fs-md: 1.125rem;                            /* 18 */
  --fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --fs-xl: clamp(1.25rem, 0.8vw + 1.06rem, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.3vw + 1.2rem, 1.875rem);
  --fs-3xl: clamp(1.75rem, 2vw + 1.3rem, 2.25rem);
  --fs-4xl: clamp(2.25rem, 3.2vw + 1.5rem, 3rem);
  --fs-5xl: clamp(2.75rem, 5vw + 1.6rem, 4rem);
  --fs-6xl: clamp(3.25rem, 7.5vw + 1.6rem, 5.5rem);
  --fs-7xl: clamp(3.75rem, 10vw + 1.5rem, 7rem);

  /* Alturas de linha copiadas literalmente do Canva */
  --lh-display: 0.84;  /* "SAVE THE DATE" */
  --lh-tight: 1.14;    /* subtítulo centralizado */
  --lh-snug: 1.21;     /* padrão dos blocos de destaque */
  --lh-body: 1.26;     /* corpo */
  --lh-loose: 1.6;     /* parágrafos longos — extrapolado para web */

  /* As peças usam letter-spacing 0 em tudo. O negativo abaixo é
     compensação ótica de Montserrat em corpos grandes, não licença
     para "apertar" títulos por gosto. */
  --ls-display: -0.03em;
  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.08em;   /* apenas para eyebrows em caixa alta */
}

/* ---------- 6. ESPAÇAMENTO E GRADE ----------------------------
   As peças usam margem lateral de 12,5% da largura (135px em 1080).
   Essa proporção vira o respiro do container.
   ------------------------------------------------------------- */
:root {
  --sp-0: 0;
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 2.5rem;    /* 40 */
  --sp-8: 3rem;      /* 48 */
  --sp-9: 4rem;      /* 64 */
  --sp-10: 5rem;     /* 80 */
  --sp-11: 6rem;     /* 96 */
  --sp-12: 8rem;     /* 128 */

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 6vw, 6rem);   /* ≈12,5% nas larguras grandes */
  --section-y: clamp(4rem, 9vw, 8rem);
}

/* ---------- 7. FORMA, ELEVAÇÃO E MOVIMENTO -------------------- */
:root {
  /* Canto reto é decisão de marca: o selo de data e a moldura neon
     das peças são retângulos puros. Arredondar descaracteriza. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  --border-w: 1px;
  --border-w-thick: 2px;
  --rule-w: 3px;      /* espessura da faixa neon, proporcional às peças */

  --glow-neon: 0 0 24px rgb(54 227 117 / 0.45), 0 0 2px rgb(223 255 216 / 0.9);
  --glow-cyan: 0 0 32px rgb(50 243 244 / 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}