/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: custom
 * vibe: "confiable, limpio, profesional, mexicano"
 * paper: oklch(98% 0.008 215) · accent: oklch(54% 0.12 215) · cta: oklch(52% 0.17 145)
 * display: Space Grotesk · body: Geist · axes: light / geometric-sans / cool
 * nav: N5 Floating pill · footer: Ft5 Statement · v1.0.0
 */

:root {
  /* === COLORS — OKLCH throughout === */

  /* Surfaces — blancos neutros sin tinte de color */
  --color-paper:      oklch(100% 0 0);
  --color-paper-2:    oklch(97%  0 0);
  --color-paper-3:    oklch(94%  0 0);

  /* Ink */
  --color-ink:        oklch(20%  0.012 215);
  --color-ink-2:      oklch(38%  0.012 215);

  /* Rules / neutrals */
  --color-rule:       oklch(86%  0.010 215);
  --color-rule-2:     oklch(91%  0.008 215);
  --color-muted:      oklch(55%  0.010 215);
  --color-neutral:    oklch(42%  0.012 215);

  /* Brand accent — teal-blue (logo wordmark color) */
  --color-accent:       oklch(54%  0.12  215);
  --color-accent-hover: oklch(48%  0.12  215);
  --color-accent-light: oklch(94%  0.040 215);

  /* CTA accent — verde (logo document icon) */
  --color-cta:       oklch(52%  0.17  145);
  --color-cta-hover: oklch(46%  0.17  145);
  --color-cta-light: oklch(93%  0.060 145);

  /* Overlay text on accents */
  --color-accent-ink: oklch(98%  0.006 215);
  --color-cta-ink:    oklch(98%  0.006 145);

  /* Focus ring */
  --color-focus: oklch(56%  0.20  215);

  /* Dark surface (CTA band, footer) */
  --color-dark:       oklch(18%  0.016 215);
  --color-dark-2:     oklch(24%  0.016 215);
  --color-dark-ink:   oklch(95%  0.008 215);
  --color-dark-muted: oklch(66%  0.010 215);
  --color-dark-rule:  oklch(30%  0.014 215);

  /* === TYPOGRAPHY === */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Geist",         system-ui, sans-serif;
  --font-mono:    "Geist Mono",    ui-monospace, monospace;

  /* Type scale — major third 1.25 */
  --text-xs:   0.64rem;    /* 10px */
  --text-sm:   0.80rem;    /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.25rem;    /* 20px */
  --text-lg:   1.5625rem;  /* 25px */
  --text-xl:   1.9531rem;  /* 31px */
  --text-2xl:  2.4414rem;  /* 39px */
  --text-3xl:  3.0518rem;  /* 49px */
  --text-4xl:  3.8147rem;  /* 61px */

  /* Display sizes — clamped */
  --text-display-s: clamp(2rem,   3.5vw + 0.5rem, 3.25rem);
  --text-display:   clamp(2.5rem, 4.5vw + 0.5rem, 4.25rem);

  /* === SPACING — 4pt scale === */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2.5rem;    /* 40px */
  --space-xl:  4rem;      /* 64px */
  --space-2xl: 6rem;      /* 96px */
  --space-3xl: 8rem;      /* 128px */

  /* === EASINGS === */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  /* === DURATIONS === */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* === RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* === RULES === */
  --rule-1: 1px solid var(--color-rule);
  --rule-2: 1px solid var(--color-rule-2);
  --rule-dark: 1px solid var(--color-dark-rule);
}