@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     CORES — paleta da marca (royal estruturado × faísca ciano)
     ============================================================ */

  /* Base */
  --color-ink: #07112B;          /* tinta royal-profunda (não preto neutro) */
  --color-off-white: #F4F6FB;    /* off-white levemente frio (papel + azul) */

  /* ROYAL DIMENSIONAL · VIVO — rampa em torno do royal saturado deles.
     Aprovado: "Híbrido Vivo". O azul que eles conhecem aparece forte em
     todo o sistema, mantendo profundidade pela rampa (sem chapado morto). */
  --color-navy-darker: #0E1C52;  /* piso royal vivo (fundo absoluto) */
  --color-navy-deep:   #16307A;  /* superfície escura primária */
  --color-navy-base:   #1E3C96;  /* blocos institucionais */
  --color-navy-mid:    #2A48B0;  /* ★ royal vivo — mid/lift e textos sobre branco */
  --color-navy-edge:   #3A5ED0;  /* edge highlight — royal vivo iluminado */

  /* CIANO — a faísca de solda da marca (substitui o cobre).
     Mantém os nomes --color-copper-* / --color-gold pra recolor automático. */
  --color-gold: #30A8C0;         /* override do --color-gold do DS */
  --color-copper-deep:   #176F84;
  --color-copper-base:   #30A8C0;  /* ★ CIANO OFICIAL do logo */
  --color-copper-bright: #4FC4DA;
  --color-copper-glow:   #76E0F0;
  /* gradiente arco de solda — energia, key art, linhas */
  --gradient-copper-arc:  linear-gradient(135deg, #176F84 0%, #30A8C0 55%, #76E0F0 100%);
  --gradient-copper-line: linear-gradient(90deg, #176F84 0%, #4FC4DA 50%, #76E0F0 100%);

  /* Neutros materiais (mantidos: estrutura, sem ruído) */
  --color-steel:    #6E7785;     /* aço escovado */
  --color-concrete: #BCC1CC;     /* concreto frio */
  --color-graphite: #182338;     /* grafite royal, sombra de bloco */

  /* ============================================================
     ALIASES SEMÂNTICOS
     ============================================================ */
  --color-bg-primary: var(--color-off-white);
  --color-bg-dark: var(--color-navy-deep);
  --color-text-primary: var(--color-ink);
  --color-text-inverse: var(--color-off-white);
  --color-accent: var(--color-copper-base);
  --color-brand: var(--color-navy-mid);

  /* Alphas */
  --color-ink-70: rgb(7 17 43 / 0.70);
  --color-ink-50: rgb(7 17 43 / 0.50);
  --color-ink-20: rgb(7 17 43 / 0.20);
  --color-ink-10: rgb(7 17 43 / 0.10);
  --color-off-white-70: rgb(244 246 251 / 0.70);
  --color-off-white-50: rgb(244 246 251 / 0.50);
  --color-off-white-20: rgb(244 246 251 / 0.20);
  --color-off-white-10: rgb(244 246 251 / 0.10);
  --color-gold-50: rgb(48 168 192 / 0.50);
  --color-gold-20: rgb(48 168 192 / 0.20);

  /* ============================================================
     FUNDOS DIMENSIONAIS (a chave para o royal não ficar morto)
     ============================================================ */
  /* "Tinta dimensional": vinheta royal com edge mais claro no centro */
  --surface-navy-paint: radial-gradient(
    ellipse at 30% 20%,
    var(--color-navy-edge) 0%,
    var(--color-navy-mid) 25%,
    var(--color-navy-base) 55%,
    var(--color-navy-deep) 85%,
    var(--color-navy-darker) 100%
  );
  /* Variação lateral (split brush) para fachada/key art */
  --surface-navy-brush: linear-gradient(
    135deg,
    var(--color-navy-darker) 0%,
    var(--color-navy-deep) 35%,
    var(--color-navy-mid) 70%,
    var(--color-navy-edge) 100%
  );
  /* Textura material — overlay sutil de "concreto/papel" */
  --texture-concrete: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(244, 246, 251, 0.012) 3px 4px
  ),
  repeating-linear-gradient(
    90deg,
    transparent 0 3px,
    rgba(244, 246, 251, 0.012) 3px 4px
  );
  /* Textura aço escovado horizontal (mais visível) */
  --texture-brushed-steel: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(244, 246, 251, 0.035) 2px 3px
  );

  /* ============================================================
     TIPOGRAFIA
     ============================================================ */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Escala fluida */
  --text-xs:     clamp(0.694rem, 0.65vw + 0.55rem, 0.8rem);
  --text-sm:     clamp(0.833rem, 0.8vw  + 0.65rem, 1rem);
  --text-base:   clamp(1rem,    1vw    + 0.75rem, 1.125rem);
  --text-lg:     clamp(1.2rem,  1.2vw  + 0.9rem,  1.5rem);
  --text-xl:     clamp(1.44rem, 1.5vw  + 1rem,    2rem);
  --text-2xl:    clamp(1.728rem,2vw    + 1.2rem,  2.5rem);
  --text-3xl:    clamp(2.074rem,3vw    + 1.4rem,  3.5rem);
  --text-4xl:    clamp(2.488rem,5vw    + 1.5rem,  5.5rem);
  --text-anchor: clamp(4rem,    8vw    + 2rem,    9rem);

  --leading-tight:   1.02;
  --leading-snug:    1.18;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.20em;

  /* ============================================================
     ESPAÇAMENTO
     ============================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;
  --section-pad-y: clamp(5rem, 10vw, 10rem);

  /* ============================================================
     GRID
     ============================================================ */
  --container-max: 1440px;
  --grid-gutter:   clamp(1rem, 2.5vw, 2.5rem);
  --grid-margin:   clamp(1.5rem, 5vw, 8rem);

  /* ============================================================
     BORDAS, RADII
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --border-hair:      1px solid var(--color-copper-base);
  --border-hair-ink:  1px solid var(--color-ink-20);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}