/* Hallmark · tokens · MR Estética — studied-DNA
 * paper light (>85%) · display geometric-sans (MR wordmark) · accent warm-magenta
 * source: Instagram @romartinezestetica_ (foto real del local)
 */

:root {
  /* Paper — beige arena cálido (pared del local) */
  --color-paper:       oklch(93% 0.010 75);
  --color-paper-2:     oklch(88% 0.014 70);
  --color-paper-3:     oklch(97% 0.006 80);

  /* Ink — negro warm del logo MR ESTÉTICA */
  --color-ink:         oklch(18% 0.005 30);
  --color-ink-2:       oklch(42% 0.008 40);
  --color-rule:        oklch(78% 0.010 70);

  /* Accent — rosa fucsia (criostick) */
  --color-accent:      oklch(58% 0.220 350);
  --color-accent-2:    oklch(50% 0.215 352);
  --color-accent-ink:  oklch(98% 0.005 350);
  --color-accent-soft: oklch(90% 0.060 350);

  /* Sistema */
  --color-focus:       oklch(58% 0.220 350);
  --color-on-photo:    oklch(98% 0.004 80);

  /* Tipografía — single grotesque family */
  --font-display: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;

  /* Espaciado 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Escala tipográfica 1.25 */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.25rem;
  --text-xl:      1.5rem;
  --text-2xl:     2rem;
  --text-3xl:     2.5rem;
  --text-display: clamp(3.25rem, 13vw, 9rem);

  /* Layout */
  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw:        78rem;
  --rule-hair:   1px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* Bordes */
  --radius-card:  0.875rem;
  --radius-lg:    1.5rem;
  --radius-pill:  9999px;
  --radius-input: 0.625rem;

  /* Sombras suaves */
  --shadow-sm: 0 4px 16px -10px oklch(18% 0.02 350 / 0.22);
  --shadow-md: 0 14px 40px -18px oklch(18% 0.03 350 / 0.30);
  --shadow-lg: 0 28px 70px -28px oklch(18% 0.04 350 / 0.40);
}