/* ============================================================
   perla - Design System - Colors, Type, Motion, Surfaces
   Snapshot: 2026-04-22
   Source:   04_TOKENS_FOR_AI.md + 02_BRAND_GUIDE.html
   ============================================================ */

/* ------------------------------------------------------------
   Local brand fonts (shipped in /fonts, TTF)
   No Google Fonts / no CDN. Real weights only - never faux-bold.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'DM Sans'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('fonts/dm-sans-v17-latin-300.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/dm-sans-v17-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/dm-sans-v17-latin-500.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/dm-sans-v17-latin-600.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Serif Display'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/dm-serif-display-v17-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Serif Display'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('fonts/dm-serif-display-v17-latin-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-500.ttf') format('truetype');
}

:root {
  /* ----------------------------------------------------------
     Core palette
     ---------------------------------------------------------- */
  --teal:         #2D7A7A;   /* primario - activo - confirmado  */
  --teal-soft:    rgba(45, 122, 122, 0.10);
  --teal-deep:    #236262;   /* hover del teal                  */
  --arena:        #A88760;   /* secundario - pendiente          */
  --arena-soft:   rgba(168, 135, 96, 0.12);
  --violeta:      #5B4B7A;   /* terciario - insight - atencion  */
  --violeta-soft: rgba(91, 75, 122, 0.10);

  /* ----------------------------------------------------------
     Neutrals
     ---------------------------------------------------------- */
  --text:        #1A2A2E;    /* texto principal                  */
  --muted:       #5E6E73;    /* texto secundario                 */
  --muted-soft:  #8A9BA0;    /* terciario + cancelado (gris, NO rojo) */
  --border:      #E4EAEC;
  --border-soft: #F0F3F5;
  --mineral:     #FAFAFA;    /* fondo por defecto                */
  --surface:     #FFFFFF;    /* cards, modales                   */

  /* ----------------------------------------------------------
     Semantic
     ---------------------------------------------------------- */
  --confirmed: var(--teal);
  --pending:   var(--arena);
  --cancelled: var(--muted-soft);   /* explicito: gris, nunca rojo */
  --alert:     var(--violeta);

  /* ----------------------------------------------------------
     Gradient iris (firma) - 5 stops obligatorios
     NO usar subsets de 2-3 stops (queda verduzco feo)
     ---------------------------------------------------------- */
  --grad-iris: linear-gradient(90deg,
    #D8B889 0%,     /* sandy   */
    #A49A7A 25%,    /* olive   */
    #4F7C80 50%,    /* teal    */
    #4C5A8C 75%,    /* indigo  */
    #6B4F99 100%    /* violeta */
  );

  /* ----------------------------------------------------------
     Type families
     Fallback stack kept minimal on purpose.
     ---------------------------------------------------------- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  /* ----------------------------------------------------------
     Type scale (mobile-first 390px)
     ---------------------------------------------------------- */
  --type-xs:   12px;   /* microcopy, timestamps */
  --type-sm:   14px;   /* labels, captions      */
  --type-base: 16px;   /* body, inputs          */
  --type-md:   18px;   /* subtitulos UI         */
  --type-lg:   22px;   /* section titles        */
  --type-xl:   28px;   /* headlines DM Serif    */
  --type-2xl:  36px;   /* hero display          */

  /* ----------------------------------------------------------
     Spacing (8-based)
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

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

  /* ----------------------------------------------------------
     Shadow - calidas, suaves, difusas (nunca drop shadow dura)
     ---------------------------------------------------------- */
  --shadow-xs:    0 1px  2px rgba(26, 42, 46, 0.04);
  --shadow-sm:    0 2px  8px rgba(26, 42, 46, 0.06);
  --shadow-md:    0 8px 24px rgba(26, 42, 46, 0.08);
  --shadow-lg:    0 16px 48px rgba(26, 42, 46, 0.10);
  --shadow-hover: 0 12px 32px rgba(26, 42, 46, 0.12);

  /* ----------------------------------------------------------
     Glass (firma del dashboard)
     ---------------------------------------------------------- */
  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-border:    1px solid rgba(228, 234, 236, 0.8);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ----------------------------------------------------------
     Motion
     ---------------------------------------------------------- */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);   /* enter/exit, reveals */
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);   /* hover, micro        */
  --dur-micro:  120ms;
  --dur-hover:  220ms;
  --dur-reveal: 700ms;
  --dur-enter:  1500ms;

  /* ----------------------------------------------------------
     Semantic tokens (dashboard UI)
     ---------------------------------------------------------- */
  --h1-size: var(--type-2xl); --h1-family: var(--font-display); --h1-weight: 400; --h1-leading: 1.1; --h1-tracking: -0.035em;
  --h2-size: var(--type-xl);  --h2-family: var(--font-display); --h2-weight: 400; --h2-leading: 1.2; --h2-tracking: -0.03em;
  --h3-size: var(--type-lg);  --h3-family: var(--font-sans);    --h3-weight: 600; --h3-leading: 1.3; --h3-tracking: normal;
  --body-size: var(--type-base); --body-family: var(--font-sans); --body-weight: 400; --body-leading: 1.5;
  --label-size: var(--type-sm);  --label-weight: 500;
  --caption-size: var(--type-xs); --caption-weight: 400;
  --mono-size: var(--type-xs);   --mono-family: var(--font-mono); --mono-weight: 500;
}

/* ============================================================
   Base semantic styles (apply directly to tags)
   ============================================================ */
html {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--mineral);
  -webkit-font-smoothing: antialiased;
}
body { font: var(--body-weight) var(--body-size)/var(--body-leading) var(--body-family); color: var(--text); }

h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-leading) var(--h1-family); letter-spacing: var(--h1-tracking); }
h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-leading) var(--h2-family); letter-spacing: var(--h2-tracking); }
h3 { font: var(--h3-weight) var(--h3-size)/var(--h3-leading) var(--h3-family); letter-spacing: var(--h3-tracking); }
p  { font: var(--body-weight) var(--body-size)/var(--body-leading) var(--body-family); color: var(--text); }

small, .caption { font-size: var(--caption-size); color: var(--muted); }
code, kbd, .mono { font-family: var(--mono-family); font-size: var(--mono-size); letter-spacing: 0.03em; color: var(--muted); }

/* Italic inherits color - no teal tinting on emphasis. */
em { font-style: italic; }

/* ------------------------------------------------------------
   Display helpers

   .eyebrow is editorial, NOT the uppercase+tracked SaaS pattern.
   If a hierarchy label is needed, this is the only shape allowed.
   ------------------------------------------------------------ */
.eyebrow {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.display          { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
.display-italic   { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.wordmark         { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; text-transform: lowercase; }
.label-editorial  { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--type-sm); color: var(--muted); letter-spacing: -0.005em; }  /* alias of .eyebrow */
.label-ui         { font-family: var(--font-sans); font-weight: 500; font-size: var(--label-size); letter-spacing: 0.01em; }
.meta-mono        { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; font-weight: 500; }

/* ------------------------------------------------------------
   Motion defaults
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}