/* Design tokens — Accenture design system (accenture-design-system.zip,
   colors_and_type.css), applied on top of the existing component CSS.

   The page is dark by default: black canvas, #202020 surfaces, white ink,
   and a single saturated accent. The design system's purple is swapped for
   the Praxian logo blue (the icon's #00d8f8 → #0098f0 gradient): --ds-primary
   (#00a8f0) is used for fills, rules and markers, and reads at ~7.9:1 on
   black, so it doubles as accent text. It is too light to carry white text,
   though (~2.7:1): anything sitting ON a blue fill uses --ds-primary-ink
   (black). The deep blues (--ds-primary-deep, --ds-band-deep) are the only
   blue surfaces that take white text. Corners are square (1px radius) and big
   statements, like everything else, are set in Roboto Flex.

   The legacy names below (--navy-*, --orange-*, --cyan-*, --tint-*…) are
   kept as aliases so the component CSS, which was written against them,
   picks up the new palette without every rule being renamed. New code
   should consume the --ds-* tokens directly. */

/* ---------- font face (self-hosted, latin subset — covers PT/EN/ES) ----------
   Roboto Flex (variable 100–1000, optical sizes) for everything — headings,
   subtitles and running text — after the reference the brand asked for
   (portal.ibeu.org.br). One family; hierarchy comes from size and weight. */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  src: url("../fonts/robotoflex-roman-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ===== design system palette ===== */
  --ds-bg: #000000;
  --ds-surface: #202020;
  --ds-surface-2: #2b2b2b;
  --ds-text: #ffffff;
  --ds-text-secondary: #cccccc;
  --ds-text-muted: #a2a2a0;
  --ds-grey-600: #616160;
  --ds-primary: #00a8f0;
  --ds-primary-hover: #33c6ff;
  --ds-primary-active: #0088d0;
  --ds-primary-deep: #003a66;
  --ds-primary-text: #00c4f8;
  --ds-primary-ink: #000000;
  /* the logo gradient, for full-bleed statement bands (black text) */
  --ds-band: linear-gradient(115deg, #00d8f8 0%, #00a8f0 55%, #0090f0 100%);
  /* deep blue band (white text) */
  --ds-band-deep: linear-gradient(135deg, #001c33 0%, #003a66 45%, #0078c8 100%);
  --ds-line: #3a3a3a;
  --ds-line-soft: #2b2b2b;
  --ds-danger: #ff5757;
  --ds-success: #2fd58a;

  /* ===== legacy aliases (see header comment) ===== */
  --navy-900: var(--ds-bg);
  --navy-800: var(--ds-primary-active);
  --navy-700: var(--ds-primary-text);
  --navy-500: var(--ds-primary);
  --blue-400: var(--ds-primary-text);
  --cyan-500: var(--ds-primary);
  --cyan-300: var(--ds-primary-text);
  --orange-600: var(--ds-primary-text);
  --orange-500: var(--ds-primary);
  --orange-400: var(--ds-primary-text);
  --green-600: var(--ds-success);
  --green-500: #10b981;
  --red-500: var(--ds-danger);

  /* action */
  --primary: var(--ds-primary);
  --primary-active: var(--ds-primary-active);
  --on-primary: var(--ds-primary-ink);

  /* text */
  --ink: var(--ds-text);
  --body: var(--ds-text-secondary);
  --muted: var(--ds-text-muted);
  --on-dark: var(--ds-text);
  --on-dark-soft: var(--ds-text-secondary);

  /* surfaces — bands alternate black / #202020; cards sit one step off
     whichever band they're on */
  --canvas: var(--ds-bg);
  --tint-blue: var(--ds-surface);
  --tint-warm: var(--ds-surface);
  --tint-cool: var(--ds-surface);
  --tint-neutral: var(--ds-surface);
  --tint-green: var(--ds-surface);
  --surface-card: var(--ds-surface-2);
  --hairline: var(--ds-line);
  --hairline-soft: var(--ds-line-soft);
  --surface-dark: var(--ds-bg);
  --surface-dark-2: var(--ds-surface);

  /* typography — one family (Roboto Flex) for headings, subtitles and text.
     "Mono" labels (step codes, indexes) use the sans with tabular figures
     instead of a code face. */
  --font-heading: "Roboto Flex", Arial, Helvetica, sans-serif;
  /* firm but not shouty: 700 for display sizes, 600 for card/panel titles */
  --fw-display: 700;
  --fw-heading: 600;
  --tracking-heading: -0.01em;
  --font-display: var(--font-heading);
  --font-body: var(--font-heading);
  --font-mono: var(--font-body);
  --tracking-display: -0.01em;

  /* type scale — fluid between 320px and ~1300px. Kept moderate on purpose:
     big enough to lead, small enough to read as a conversation. */
  --fs-hero: clamp(36px, 5vw, 64px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-statement: clamp(26px, 3vw, 40px);
  --fs-lead: clamp(18px, 1.5vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 14px;
  --lh-heading: 1.1;
  --lh-body: 1.65;

  /* square corners, per the design system's 1px radius */
  --r-xs: 1px;
  --r-sm: 1px;
  --r-md: 1px;
  --r-lg: 1px;
  --r-xl: 1px;
  --r-pill: 1px;

  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  /* fluid rhythm instead of a breakpoint step: one clamp covers 320→1440px
     with no visible jump on resize */
  --s-section: clamp(56px, 6.4vw, 96px);
  --pad-card: clamp(20px, 4.2vw, 32px);
  --container: 1200px;
  --header-h: 64px;
  /* the header floats: gap above it, and the total space it covers */
  --header-top: 12px;
  --header-space: calc(var(--header-top) + var(--header-h));
  /* height of the official-sponsor strip fixed above the header */
  --strip-h: 32px;
  --header-w: min(calc(var(--container) + 32px), calc(100% - 24px));

  /* one shared clock for every illustration — they pulse together */
  --clock: 7s;

  --shadow-elevated: 0 24px 48px -28px rgba(0, 168, 240, 0.45);
}