/* ==========================================================================
   LIDEYE — DESIGN TOKENS  v1.0
   Identidade visual derivada do logotipo (#00AED2 / #4C4E4D) e dos totens
   de monitoramento urbano (noite, LED ciano, faixa de sinalização).
   ========================================================================== */

/* --- FONTES ------------------------------------------------------------- */
/* Sora: display/títulos — geométrica, ecoa as formas arredondadas do logo  */
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Variable-latin.woff2') format('woff2'),
       url('../assets/fonts/Sora-Variable.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Variable-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter: corpo e interface — legível em qualquer tamanho                    */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable-latin.woff2') format('woff2'),
       url('../assets/fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono: "leitura de máquina" — placas, timestamps, labels de câmera */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Variable-latin.woff2') format('woff2'),
       url('../assets/fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* --- COR: MARCA -------------------------------------------------------- */
  --cyan-500: #00AED2;  /* Ciano LidEye — cor exata do logotipo. Ações, destaques */
  --cyan-400: #2BC5E4;  /* LED — brilhos, glow, estados hover em fundo escuro */
  --cyan-600: #0092B4;  /* Hover/pressed de botões em fundo claro */
  --cyan-700: #00708C;  /* Texto ciano acessível sobre fundo claro (links) */
  --cyan-100: #DFF6FB;  /* Lavagem ciano — fundos de chips e seleções */

  /* --- COR: NEUTROS (grafite do logotipo) -------------------------------- */
  --grafite-900: #16191A;  /* Títulos e texto de máxima ênfase */
  --grafite-700: #4C4E4D;  /* Cinza exato do logotipo — corpo de texto */
  --grafite-500: #75797A;  /* Texto secundário, legendas */
  --grafite-300: #C9CFD1;  /* Bordas, divisores */
  --gelo-50:    #F4F8F9;   /* Superfície clara alternativa (tinge de ciano) */
  --branco:     #FFFFFF;

  /* --- COR: NOITE (cenário urbano dos totens) ---------------------------- */
  --noite-900: #081E28;  /* Fundo escuro principal — seções "vigília" */
  --noite-700: #0E3140;  /* Fim de gradiente, cartões sobre noite */
  --noite-500: #1B4A5E;  /* Bordas e divisores sobre noite */

  /* --- COR: FUNCIONAIS --------------------------------------------------- */
  --sinal-500: #E8503A;  /* Faixa de sinalização do totem — alertas, erros. Uso raro */
  --ok-500:    #25D366;  /* WhatsApp / sucesso */

  /* --- GRADIENTES -------------------------------------------------------- */
  --grad-vigilia: linear-gradient(160deg, #081E28 0%, #0E3140 100%);
  --grad-led: linear-gradient(180deg, #2BC5E4 0%, #00AED2 55%, #0092B4 100%);

  /* --- TIPOGRAFIA -------------------------------------------------------- */
  --font-display: 'Sora', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  --text-display: clamp(2.6rem, 6vw, 4.25rem);  /* Sora 800, lh 1.05, ls -0.02em */
  --text-h2: clamp(1.9rem, 3.5vw, 2.5rem);      /* Sora 700, lh 1.15, ls -0.015em */
  --text-h3: 1.375rem;                          /* Sora 600, lh 1.3 */
  --text-lead: 1.125rem;                        /* Inter 400, lh 1.75 */
  --text-body: 1rem;                            /* Inter 400, lh 1.7 */
  --text-small: 0.875rem;                       /* Inter 500, lh 1.5 */
  --text-readout: 0.8125rem;                    /* Mono 500, caps, ls +0.08em */

  /* --- FORMA ------------------------------------------------------------- */
  --radius-pill: 999px;  /* Botões — pílula, herda o arredondado do logo */
  --radius-card: 20px;   /* Cartões */
  --radius-field: 12px;  /* Inputs */
  --radius-media: 16px;  /* Imagens e vídeos */

  /* --- MIRA (assinatura da marca — cantoneiras do ícone) ------------------ */
  --mira-cor: var(--cyan-500);
  --mira-espessura: 3px;
  --mira-braco: 22px;

  /* --- ELEVAÇÃO ----------------------------------------------------------- */
  --sombra-1: 0 4px 14px rgba(8, 30, 40, 0.06);
  --sombra-2: 0 16px 40px rgba(8, 30, 40, 0.10);
  --sombra-led: 0 6px 24px rgba(0, 174, 210, 0.35);

  /* --- ESPAÇO (base 4px) -------------------------------------------------- */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
  --esp-9: 96px; --esp-10: 128px;

  /* --- MOVIMENTO ----------------------------------------------------------- */
  --mov-rapido: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-padrao: 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- ASSINATURA: MIRA ------------------------------------------------------
   Cantoneiras de enquadramento extraídas do ícone. Aplicar em imagens,
   números de destaque ou no elemento-herói. Nunca em tudo ao mesmo tempo. */
.mira {
  position: relative;
  background:
    linear-gradient(var(--mira-cor), var(--mira-cor)) left top    / var(--mira-braco) var(--mira-espessura) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) left top    / var(--mira-espessura) var(--mira-braco) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) right top   / var(--mira-braco) var(--mira-espessura) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) right top   / var(--mira-espessura) var(--mira-braco) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) left bottom / var(--mira-braco) var(--mira-espessura) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) left bottom / var(--mira-espessura) var(--mira-braco) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) right bottom/ var(--mira-braco) var(--mira-espessura) no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) right bottom/ var(--mira-espessura) var(--mira-braco) no-repeat;
}

/* --- READOUT ---------------------------------------------------------------
   Rótulo em mono, a "voz de máquina" da marca: eyebrows, tags de câmera,
   timestamps. Ex.: [ CAM 04 · RECIFE ]                                      */
.readout {
  font-family: var(--font-mono);
  font-size: var(--text-readout);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}