/* Design tokens — ported from 0_Ajustes_Sprints/0_sprint2_ajustesdokaiky/01-design-system.md
   Structure comes from Cal.com's design system (96px section rhythm, radius
   scale, CTA band, dark footer, 1200px container); color comes from the
   Praxian brand (navy + orange). No surface ever uses neutral grey — every
   grey is navy-desaturated, which is what keeps the page coherent even with
   a lot of white. See that file for the full rationale behind each value. */

:root {
  /* brand */
  --navy-900: #04203f;
  --navy-800: #04305f;
  --navy-700: #043d80;
  --navy-500: #0a5cb8;
  --blue-400: #2e7cf6;
  --cyan-500: #0e93b8;
  --cyan-300: #67d8f5;
  --orange-600: #9c5403;
  --orange-500: #e8871a;
  --orange-400: #f39d36;
  --green-600: #0c7052;
  --green-500: #10b981;
  --red-500: #dc2626;

  /* action */
  --primary: var(--navy-700);
  --primary-active: var(--navy-800);
  --on-primary: #ffffff;

  /* text — all validated at AA on the surfaces they run on */
  --ink: #0a1f33;
  --body: #3c536b;
  --muted: #546b81;
  --on-dark: #ffffff;
  --on-dark-soft: #a9c0d6;

  /* surfaces tinted with navy, never neutral grey */
  --canvas: #ffffff;
  --tint-blue: #f1f6fd;
  --tint-warm: #fff6ec;
  --tint-cool: #eef5fb;
  --surface-card: #eef4fb;
  --hairline: #dbe6f2;
  --hairline-soft: #eaf1f8;
  --surface-dark: var(--navy-900);
  --surface-dark-2: #052a52;

  /* one system-font stack for display and body — contrast comes from
     weight and scale, not from mixing families */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-display: -0.04em;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  --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, 7.4vw, 96px);
  --pad-card: clamp(20px, 4.2vw, 32px);
  --container: 1200px;
  --header-h: 64px;

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

  /* legacy alias kept for anything not yet migrated off it */
  --shadow-elevated: 0 24px 48px -28px color-mix(in srgb, var(--navy-700) 45%, transparent);
}