/*
  Tokens da Up Imbé.

  Todos os valores de marca foram amostrados dos pixels do logo e da fotografia
  da fachada, nao escolhidos por gosto. A origem de cada um esta no DESIGN.md.

  Esta pagina tem um unico mundo visual: noite. Nao ha tema claro, por decisao
  registrada no DESIGN.md ("Sinal Aceso"). Por isso nao existe bloco
  `prefers-color-scheme` aqui: a cor e pintada explicitamente em todos os casos.
*/

:root {
  color-scheme: dark;

  /* --- Marca: amostrado do logo --- */
  --up-green: #5cbe70;      /* o "!" */
  --up-green-hi: #7ade8d;   /* mesmo verde, clareado para foco e hover */
  --up-cyan: #18afe0;       /* o anel */
  --bone: #eef2f0;          /* o branco do "up" */

  /* --- Lugar: amostrado da fotografia --- */
  --night: #07090c;         /* ceu */
  --night-2: #0d1218;       /* sombra da parede */
  --night-3: #151d26;       /* vidro escuro */
  --led: #f0d878;           /* fita de LED do beiral */
  --wall: #a18947;          /* parede iluminada */

  /* --- Papeis de superficie e texto --- */
  --color-background: var(--night);
  --color-surface: var(--night-2);
  --color-surface-raised: var(--night-3);
  --color-foreground: var(--bone);
  --color-muted: #93a2ab;
  --color-subtle: #8494a0;
  --color-on-photo: #c3ced4;   /* texto pequeno sobre fotografia: mede 5,3:1 no hero */
  --color-border: #1e2932;
  --color-border-strong: #2c3b47;

  /* --- Papeis de acao --- */
  --color-primary: var(--up-green);
  --color-primary-strong: var(--up-green-hi);
  --color-on-primary: var(--night);
  --color-accent: var(--up-cyan);
  --color-focus: var(--up-green-hi);

  /* --- Estado (separado do acento) --- */
  --color-success: var(--up-green);
  --color-warning: #e0a83c;
  --color-error: #e2705a;
  --color-info: var(--up-cyan);

  /* --- Tipografia --- */
  --font-display: Archivo, "Archivo Black", "Segoe UI", system-ui, sans-serif;
  --font-body: Barlow, "Segoe UI", system-ui, sans-serif;
  --font-label: "Barlow Condensed", Barlow, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 800;
  --weight-black: 900;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1.02rem;
  --text-md: clamp(1.08rem, 1rem + 0.34vw, 1.24rem);
  --text-lg: clamp(1.24rem, 1.11rem + 0.58vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.28rem + 1vw, 2.05rem);
  --text-2xl: clamp(1.95rem, 1.55rem + 1.9vw, 3.1rem);
  --text-3xl: clamp(2.6rem, 1.85rem + 3.4vw, 4.9rem);
  --text-hero: clamp(3rem, 1.9rem + 5.1vw, 7rem);

  --leading-tight: 1.02;
  --leading-heading: 1.06;
  --leading-body: 1.62;
  --tracking-heading: -0.028em;
  --tracking-label: 0.1em;

  /* --- Espacamento --- */
  --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: 4.5rem;
  --space-9: 6.5rem;

  /* --- Layout --- */
  --shell: 1240px;
  /* faixa de verbos fixa no topo + cabecalho: o hero desconta os dois */
  --ticker-h: 2.5rem;
  --header-h: 68px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --measure: 62ch;
  --touch-target: 44px;

  /* --- Forma: a marca e angular --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-thick: 2px;
  --focus-ring: 3px;
  --focus-offset: 3px;

  --shadow-raised: 0 1px 0 rgba(238, 242, 240, 0.05), 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 24px 70px rgba(0, 0, 0, 0.7);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Saida mais longa e mais macia: e o que faz a revelacao parecer assentar
     em vez de parar. Usada em tudo que entra na tela. */
  --ease-soft: cubic-bezier(0.16, 0.84, 0.28, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-reveal: 780ms;
  --duration-scene: 1100ms;
  --stagger: 90ms;

  /* --- Z-index --- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* --- Valores escritos pelo JavaScript (ponteiro e scroll) --- */
  --pointer-x: 50%;
  --pointer-y: 40%;
  --scroll-progress: 0;
}