/* Design tokens — palette derived from the registry's logo (navy, blue, amber). */
:root {
  color-scheme: light;

  /* Color */
  --color-brand: #0b2554;          /* navy: dominant */
  --color-brand-strong: #071a3d;
  --color-brand-soft: #e6ebf5;
  --color-heading: var(--color-brand); /* brand-colored text; white in high contrast */
  --color-accent: #f2a900;         /* amber: graphic accent, text only on navy */
  --color-accent-strong: #c98a00;
  --color-link: #1a56b8;           /* 6.3:1 on --color-bg */
  --color-link-hover: #0b2554;
  --color-bg: #ffffff;
  --color-bg-elevated: #f6f8fc;
  --color-bg-sunken: #eef3fa;      /* ice blue */
  --color-text: #0e1b33;           /* 15:1 on --color-bg */
  --color-text-muted: #475569;     /* 7.5:1 on white */
  --color-on-brand: #ffffff;
  --color-on-brand-muted: #c3cde0;
  --color-on-brand-rule: rgb(255 255 255 / 0.12);    /* dividers and hover tint on navy */
  --color-on-brand-outline: rgb(255 255 255 / 0.35); /* button outlines on navy */
  --color-hero-veil: rgb(255 255 255 / 0.1);
  --color-hero-panel: rgb(255 255 255 / 0.9);       /* keeps the hero title above 4.5:1 */
  --color-on-accent: #0b2554;
  --color-whatsapp: #1c7c4d;       /* 5.2:1 with white */
  --color-whatsapp-hover: #166640;
  --color-border: #d8e0eb;
  --color-rule: #0b2554;
  --color-focus: #f2a900;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-warning-bg: #fdf3dc;
  --color-warning-text: #7a4a00;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* Typography */
  --font-display: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 2rem;      /* 32 */
  --text-3xl: 3rem;      /* 48 */
  --text-4xl: 4rem;      /* 64 */

  /* Space (4px scale) */
  --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;

  --container: 72rem;
  --measure: 40rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgb(11 37 84 / 0.06);
  --shadow-md: 0 4px 10px -2px rgb(11 37 84 / 0.12);
  --shadow-lg: 0 16px 32px -12px rgb(11 37 84 / 0.25);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-skip: 300;
}