/* Tokens de Cairos. Fuente de verdad: DESIGN.md del proyecto. */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

:root {
  color-scheme: light;

  /* Marca (manual de marca, pp. 37-38) */
  --navy: #081f2c;
  --gold: #c7b273;
  --cream: #f4e7b2;

  /* Roles */
  --background: #f5f3ee;
  --foreground: #14181b;
  --card: #fbfaf7;
  --muted: #ebe8e1;
  --muted-foreground: #595d60;
  --primary: var(--navy);
  --primary-foreground: #f5f3ee;
  --accent: var(--gold);
  --gold-ink: var(--navy);
  --border: #d8d4ca;
  --border-strong: #8a867b;
  --ring: #081f2c;
  --ring-on-dark: #f4e7b2;
  --destructive: #9b2c20;
  --success: #2f6b3c;
  --warning: #8a5a00;
  --on-navy: #f1efe9;
  --on-navy-muted: #aab4ba;

  /* Tipografía */
  --font-display: "Zodiak", "Times New Roman", serif;
  --font-body: "Supreme", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.25rem, 1.3rem + 3vw, 3.75rem);
  --text-display: clamp(3.25rem, 1.2rem + 7.4vw, 7.25rem);

  /* Espaciado (base 4 px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --container: 1280px;
  --gutter: 16px;

  /* Radios (2 + píldora) y sombra única */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-full: 999px;
  --shadow: 0 10px 30px -12px rgb(8 31 44 / 0.35);

  /* Íconos */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  --icon-stroke: 1.5;

  /* Motion */
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-page: 640ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .13 3%, .5 9%, .81 15%, .95 21%, 1.02 28%, 1.03 34%, 1.01 45%, 1);

  /* Capas */
  --z-header: 40;
  --z-demo: 41;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }