/* ==========================================================================
   SafeStep · base.css
   Shared by every page. Organised with ITCSS, from the most generic rules
   to the most specific:
     1. Settings  – design tokens (colours, fonts, sizes)
     2. Generic   – box-sizing, document defaults, background texture
     3. Elements  – bare HTML elements (h1, p, a…)
     4. Objects   – layout helpers with no visual style (.container)
     5. Utilities – global overrides (reduced motion)
   Components live in components.css, page-specific styles in pages/*.css.

   Palette "Azulejo e Sinal" (see estudo-design.html):
     60 % neutrals (paper/surface), 30 % ink, 10 % accent (azulejo cobalt).
     Alert orange is the complement of cobalt and is reserved for threats.
     Every text pair below passes WCAG 2.1 AA (most pass AAA).
   ========================================================================== */

/* 1. Settings ------------------------------------------------------------- */
:root {
  /* Neutrals, slightly biased towards the cobalt hue */
  --color-paper: #F4F6FB;        /* page background          ink on it: 16.5:1 */
  --color-surface: #FFFFFF;      /* cards and bands                     17.9:1 */
  --color-ink: #0B1633;          /* text, dark bands                          */
  --color-muted: #4A5675;        /* secondary text          on paper:  6.8:1 */
  --color-line: #D7DDEB;         /* borders and dividers                      */

  /* Accent: azulejo cobalt = protection, trust, links, "blocked" */
  --color-accent: #2541B2;       /* on paper 7.8:1, white on it 8.5:1         */
  --color-accent-soft: #E4E9FB;
  --color-on-accent: #FFFFFF;

  /* Alert: safety-signal orange = threats, deadlines, fines (use sparingly) */
  --color-alert: #A9450B;        /* on paper 5.5:1, on alert-soft 5.1:1       */
  --color-alert-soft: #FCEADC;

  /* Always-dark palette used by the loader, the same in both themes */
  --color-night: #060E22;
  --color-night-fg: #E8ECF8;     /* on night 16.3:1 */
  --color-glow: #7D93FF;         /* on night  6.8:1 */

  /* Typography
     Display: Archivo, a grotesque with a width axis – set slightly expanded
              for a stable, engineered "shield" feel in headings.
     Body:    Public Sans, designed for public-service interfaces – neutral,
              highly legible, fits a compliance product.
     Mono:    JetBrains Mono, only for timestamps and counters (log data). */
  --font-display: "Archivo", "Arial", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --stretch-display: 108%;

  /* Corner scale: small, "engineered" corners everywhere (matches the header).
     Pills are kept only for the on/off switches, where the round shape means something. */
  --radius-sm: 4px;             /* buttons, inputs, tags, header */
  --radius: 6px;                /* cards and panels */
  --header-h: 68px;            /* floating header bar height */
  --header-top: 20px;          /* gap between the bar and the top edge */
  --header-space: calc(var(--header-h) + var(--header-top) + 12px);
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(64px, 9vw, 120px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-sweep: cubic-bezier(.7, 0, .2, 1);

  /* Background texture */
  --grain-opacity: .05;
  --grain-blend: multiply;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #070D1F;
    --color-surface: #0D1630;
    --color-ink: #E8ECF8;
    --color-muted: #9BA7C6;
    --color-line: #1E2A4A;
    --color-accent: #8EA2FF;
    --color-accent-soft: #17225A;
    --color-on-accent: #070D1F;
    --color-alert: #FF8B4D;
    --color-alert-soft: #3A1D0E;
    --grain-opacity: .07;
    --grain-blend: screen;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-paper: #070D1F;
  --color-surface: #0D1630;
  --color-ink: #E8ECF8;
  --color-muted: #9BA7C6;
  --color-line: #1E2A4A;
  --color-accent: #8EA2FF;
  --color-accent-soft: #17225A;
  --color-on-accent: #070D1F;
  --color-alert: #FF8B4D;
  --color-alert-soft: #3A1D0E;
  --grain-opacity: .07;
  --grain-blend: screen;
  color-scheme: dark;
}

@media (max-width: 860px) {
  :root {
    --header-h: 62px;
    --header-top: 0px;
    --header-space: var(--header-h);
  }
}

/* 2. Generic -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Static texture: fine paper grain behind everything.
   The interactive layer (components/texture.js) sits just above it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Anchors and keyboard focus stop below the floating header */
html {
  scroll-padding-top: var(--header-space);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Faster, cleaner taps on touch screens */
a,
button,
label,
summary,
input,
select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Skip link: first thing reached with the keyboard, hidden until focused */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 3000;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s ease;
}

.skip-link:focus-visible {
  transform: none;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* 3. Elements ------------------------------------------------------------- */
a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0;
}

/* 4. Objects -------------------------------------------------------------- */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 5. Utilities ------------------------------------------------------------ */
/* Read by screen readers, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}