/**
 * ARANOX Design System Premium
 * Release: AW2_145
 * Escopo: tokens globais, primitivas, acessibilidade e componentes opt-in.
 */

:root{
  /* Brand */
  --arx-black:#05070a;
  --arx-graphite-950:#0b1016;
  --arx-graphite-900:#111923;
  --arx-graphite-800:#18232e;
  --arx-navy-900:#09283a;
  --arx-navy-800:#0e3b51;
  --arx-blue-700:#146e99;
  --arx-blue-600:#1686b2;
  --arx-blue-500:#279dc7;
  --arx-cyan-500:#42d9df;
  --arx-green-500:#53c98c;
  --arx-violet-500:#7760ee;
  --arx-amber-500:#e3ad4a;
  --arx-red-500:#dc5c67;
  --arx-white:#ffffff;
  --arx-paper-50:#f8faf9;
  --arx-paper-100:#f2f6f5;
  --arx-paper-200:#e8eff0;
  --arx-ink:#1c2931;
  --arx-muted:#69757c;

  /* Semantic */
  --arx-color-primary:var(--arx-blue-600);
  --arx-color-accent:var(--arx-cyan-500);
  --arx-color-success:var(--arx-green-500);
  --arx-color-warning:var(--arx-amber-500);
  --arx-color-danger:var(--arx-red-500);
  --arx-color-info:var(--arx-violet-500);

  /* Typography */
  --arx-font-sans:inherit;
  --arx-font-size-xs:.75rem;
  --arx-font-size-sm:.875rem;
  --arx-font-size-md:1rem;
  --arx-font-size-lg:1.125rem;
  --arx-font-size-xl:1.375rem;
  --arx-font-size-2xl:clamp(1.75rem,3vw,2.6rem);
  --arx-font-size-3xl:clamp(2.25rem,4.4vw,4.5rem);
  --arx-font-size-hero:clamp(3rem,6.4vw,6.6rem);
  --arx-line-tight:.95;
  --arx-line-heading:1.05;
  --arx-line-body:1.75;
  --arx-tracking-tight:-.045em;
  --arx-tracking-label:.18em;

  /* Layout */
  --arx-shell:1180px;
  --arx-gutter:24px;
  --arx-section-space:clamp(80px,9vw,132px);
  --arx-grid-gap:clamp(14px,2vw,24px);

  /* Radius */
  --arx-radius-xs:8px;
  --arx-radius-sm:12px;
  --arx-radius-md:18px;
  --arx-radius-lg:24px;
  --arx-radius-xl:32px;
  --arx-radius-pill:999px;

  /* Border */
  --arx-line-light:rgba(16,36,48,.13);
  --arx-line-dark:rgba(255,255,255,.13);

  /* Shadow */
  --arx-shadow-xs:0 8px 24px rgba(3,10,16,.06);
  --arx-shadow-sm:0 16px 40px rgba(3,10,16,.08);
  --arx-shadow-md:0 24px 64px rgba(3,10,16,.12);
  --arx-shadow-lg:0 34px 88px rgba(0,0,0,.28);
  --arx-shadow-glow:0 0 70px rgba(66,217,223,.16);

  /* Motion */
  --arx-ease:cubic-bezier(.2,.8,.2,1);
  --arx-duration-fast:180ms;
  --arx-duration-base:280ms;
  --arx-duration-slow:720ms;

  /* Layer */
  --arx-z-base:1;
  --arx-z-header:100;
  --arx-z-overlay:1000;
}

/* Accessibility foundation */
html{
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(66,217,223,.55);
  outline-offset:4px;
}

::selection{
  color:var(--arx-white);
  background:var(--arx-blue-600);
}

/* Global safety */
img,
svg,
video,
canvas{
  max-width:100%;
}

button,
input,
select,
textarea{
  font:inherit;
}

.arx-shell{
  width:min(var(--arx-shell),calc(100% - (var(--arx-gutter) * 2)));
  margin-inline:auto;
}

.arx-section{
  position:relative;
  padding-block:var(--arx-section-space);
}

.arx-section--paper{
  color:var(--arx-ink);
  background:linear-gradient(180deg,var(--arx-paper-50),var(--arx-paper-200));
}

.arx-section--dark{
  color:var(--arx-white);
  background:
    radial-gradient(circle at var(--arx-pointer-x,75%) var(--arx-pointer-y,25%),rgba(66,217,223,.10),transparent 28%),
    linear-gradient(135deg,var(--arx-black),var(--arx-graphite-900));
}

.arx-grid{
  display:grid;
  gap:var(--arx-grid-gap);
}

.arx-grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.arx-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.arx-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.arx-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--arx-color-primary);
  font-size:var(--arx-font-size-xs);
  font-weight:900;
  letter-spacing:var(--arx-tracking-label);
  text-transform:uppercase;
}

.arx-kicker::before{
  content:"";
  width:34px;
  height:2px;
  background:currentColor;
}

.arx-heading{
  margin:18px 0 0;
  font-size:var(--arx-font-size-3xl);
  line-height:var(--arx-line-heading);
  letter-spacing:var(--arx-tracking-tight);
  text-wrap:balance;
}

.arx-lead{
  max-width:760px;
  color:var(--arx-muted);
  font-size:var(--arx-font-size-lg);
  line-height:var(--arx-line-body);
}

.arx-card{
  position:relative;
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-lg);
  background:var(--arx-white);
  box-shadow:var(--arx-shadow-sm);
  overflow:hidden;
  transition:
    transform var(--arx-duration-base) var(--arx-ease),
    border-color var(--arx-duration-base) var(--arx-ease),
    box-shadow var(--arx-duration-base) var(--arx-ease);
}

.arx-card:hover{
  transform:translateY(-6px);
  border-color:rgba(22,134,178,.28);
  box-shadow:var(--arx-shadow-md);
}

.arx-card--dark{
  color:var(--arx-white);
  border-color:var(--arx-line-dark);
  background:rgba(255,255,255,.045);
  box-shadow:var(--arx-shadow-lg);
  backdrop-filter:blur(16px);
}

.arx-panel{
  position:relative;
  padding:clamp(22px,3.5vw,46px);
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-xl);
  background:linear-gradient(145deg,var(--arx-white),var(--arx-paper-100));
  box-shadow:var(--arx-shadow-md);
  overflow:hidden;
}

.arx-panel--dark{
  color:var(--arx-white);
  border-color:var(--arx-line-dark);
  background:
    radial-gradient(circle at var(--arx-pointer-x,80%) var(--arx-pointer-y,20%),rgba(66,217,223,.08),transparent 30%),
    rgba(255,255,255,.035);
  box-shadow:var(--arx-shadow-lg);
  backdrop-filter:blur(18px);
}

.arx-chip{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-pill);
  background:rgba(255,255,255,.70);
  color:var(--arx-ink);
  font-size:var(--arx-font-size-xs);
  font-weight:900;
}

.arx-button{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 25px;
  border:1px solid transparent;
  border-radius:var(--arx-radius-pill);
  font-weight:900;
  text-decoration:none;
  transition:
    transform var(--arx-duration-base) var(--arx-ease),
    box-shadow var(--arx-duration-base) var(--arx-ease),
    background var(--arx-duration-base) var(--arx-ease);
}

.arx-button:hover{
  transform:translateY(-3px);
}

.arx-button--primary{
  color:var(--arx-black);
  background:linear-gradient(135deg,var(--arx-cyan-500),var(--arx-green-500));
  box-shadow:0 14px 38px rgba(66,217,223,.20);
}

.arx-button--secondary{
  color:var(--arx-white);
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.04);
}

.arx-divider{
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,var(--arx-line-light),transparent);
}

.arx-number{
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border-radius:var(--arx-radius-md);
  color:var(--arx-white);
  background:linear-gradient(145deg,var(--arx-navy-900),var(--arx-blue-600));
  font-weight:900;
}

.arx-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--arx-font-size-xs);
  font-weight:900;
}

.arx-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 16px currentColor;
}

.arx-status--success{color:var(--arx-green-500)}
.arx-status--warning{color:var(--arx-amber-500)}
.arx-status--danger{color:var(--arx-red-500)}
.arx-status--info{color:var(--arx-cyan-500)}

.arx-mesh{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.arx-mesh::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 95%);
}

.arx-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity var(--arx-duration-slow) var(--arx-ease),
    transform var(--arx-duration-slow) var(--arx-ease);
}

.arx-reveal.is-visible{
  opacity:1;
  transform:none;
}

.arx-stagger>*{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity var(--arx-duration-slow) var(--arx-ease),
    transform var(--arx-duration-slow) var(--arx-ease);
}

.arx-stagger.is-visible>*{
  opacity:1;
  transform:none;
}

.arx-stagger.is-visible>*:nth-child(2){transition-delay:70ms}
.arx-stagger.is-visible>*:nth-child(3){transition-delay:140ms}
.arx-stagger.is-visible>*:nth-child(4){transition-delay:210ms}
.arx-stagger.is-visible>*:nth-child(5){transition-delay:280ms}
.arx-stagger.is-visible>*:nth-child(6){transition-delay:350ms}
.arx-stagger.is-visible>*:nth-child(7){transition-delay:420ms}
.arx-stagger.is-visible>*:nth-child(8){transition-delay:490ms}

/* Refinamento transversal não destrutivo */
:where(.rai-page,.tc-page,.esg-page,.sic-page,.compliance-page) :where(h1,h2,h3){
  text-wrap:balance;
}

:where(.rai-page,.tc-page,.esg-page,.sic-page,.compliance-page) :where(a,button){
  -webkit-tap-highlight-color:transparent;
}

:where(.rai-page,.tc-page,.esg-page,.sic-page,.compliance-page) :where(section){
  scroll-margin-top:96px;
}

@media(max-width:1080px){
  .arx-grid--4,
  .arx-grid--3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  :root{
    --arx-gutter:12px;
  }

  .arx-grid--4,
  .arx-grid--3,
  .arx-grid--2{
    grid-template-columns:1fr;
  }

  .arx-card,
  .arx-panel{
    border-radius:var(--arx-radius-lg);
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .arx-reveal,
  .arx-stagger>*{
    opacity:1;
    transform:none;
    transition:none;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
