/* Hallmark tokens · DelLimón
 * Fixed brand tokens live here (paper, ink, citrus accent, type, spacing, motion).
 * The "brand" / "leaf" colour is intentionally NOT here — it is generated at
 * request-time by index.php from BRAND_COLOR (../includes/config.php) via
 * paleta_marca(), because this landing lives inside the multi-tenant ORDIX
 * app and each installation can carry its own brand colour. See the inline
 * :root block in index.php's <head> for --color-brand-*.
 */
:root {
  /* Solo modo claro: evita que el navegador del celular oscurezca la página por su cuenta */
  color-scheme: only light;

  /* Paper — warm cream, tinted toward the citrus hue (85) */
  --color-paper:      #F9F5EB; /* oklch(97% 0.014 85) */
  --color-paper-2:    #F0EBDF; /* oklch(94% 0.016 85) */
  --color-paper-3:    #E3DDD1; /* oklch(90% 0.018 85) */

  /* Ink — warm dark brown-black, never pure black */
  --color-ink:        #1D1711; /* oklch(21% 0.015 70) */
  --color-ink-2:      #4D4740; /* oklch(40% 0.014 70) */
  --color-muted:      #706B64; /* oklch(53% 0.012 78) */

  /* Rules / hairlines */
  --color-rule:       #C1BDB5; /* oklch(80% 0.012 85) */
  --color-rule-2:     #D4D1CA; /* oklch(86% 0.010 85) */

  /* Citrus accent — color exacto del logo (#f9e11f), fijo, independiente del BRAND_COLOR de la instalación */
  --color-accent:      #f9e11f;
  --color-accent-2:    #E9CA80;   /* oklch(85% 0.10 88) — paler wedge tint for the citrus mark */
  --color-accent-ink:  var(--color-ink);      /* accent L > 50 → dark text on fill */
  --color-focus:       #D49100; /* oklch(70% 0.19 85) */

  /* Type */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --text-xs:      0.64rem;
  --text-sm:      0.8rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.375rem;
  --text-xl:      1.75rem;
  --text-2xl:     2.25rem;
  --text-3xl:     2.75rem;
  --text-display: clamp(2.5rem, 4vw + 1rem, 4.25rem);

  /* Spacing — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* 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;

  /* Radius */
  --radius-tile: 1.75rem;
  --radius-card: 1.25rem;
  --radius-pill: 999px;

  /* Z-index */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-short: 0ms;
    --dur-long:  0ms;
  }
}