/* ============================================================
   TOKENS
   Primitive values only. Nothing here references a theme; themes
   map these onto the semantic variables components actually use.
   ============================================================ */

:root {
    /* --- Brand palette ------------------------------------ */
    --yuna-indigo-200: #b4bdec;
    --yuna-indigo-300: #8793de;
    --yuna-indigo-400: #5f6bc8;
    --yuna-indigo-500: #434aa8;
    --yuna-indigo-600: #343a86;
    --yuna-indigo-700: #2a2d66;
    --yuna-indigo-900: #141530;
    --yuna-indigo-950: #0c0c1e;

    --yuna-violet-200: #d6c6f3;
    --yuna-violet-300: #b89fe8;
    --yuna-violet-400: #9a78da;
    --yuna-violet-500: #7f5bc4;
    --yuna-violet-700: #4f347a;

    --yuna-gold-200: #f3e3ad;
    --yuna-gold-300: #e8cd78;
    --yuna-gold-500: #c29536;


    /* --- Status ------------------------------------------- */
    --yuna-success: #3f8f63;
    --yuna-danger:  #c2524c;
    --yuna-warning: #c08a2e;
    --yuna-info:    #3d7ba6;

    /* --- Typography --------------------------------------- */
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Cormorant Garamond", "Georgia", serif;

    /* Suelo en pixeles: con la raiz fluida estas dos caian a 10,4 y 11,4px en
       un movil, por debajo de lo que se lee comodo en una etiqueta en
       mayusculas y con espaciado. El resto de la escala si acompana a la raiz. */
    --text-2xs: max(0.6875rem, 11px);
    --text-xs:  max(0.75rem, 12px);
    --text-sm:  0.875rem;
    --text-base: 1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --leading-tight: 1.2;
    --leading-snug: 1.45;
    --leading-normal: 1.65;

    --tracking-wide: 0.06em;
    --tracking-wider: 0.14em;

    /* El peso base. Casi nunca hay que escribirlo, porque es el que ya
       trae el texto; hace falta para deshacer un `semibold` heredado,
       como en un `summary` con una pista dentro. */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* --- Spacing (4px scale) ------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    /* The large steps are fluid: they keep their full value on a desktop and
       compress on a phone, where 24px of padding either side of a 360px
       screen is a seventh of the width. The small steps stay fixed, because
       they are already tight and shrinking them would only blur the rhythm.

       One change here reaches every large padding, gap and margin in the app,
       which is twenty-two rules, rather than overriding each in a media
       query and leaving the next one to be forgotten. */
    --space-5: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-6: clamp(1.25rem, 1rem + 1.4vw, 2rem);
    --space-7: clamp(1.5rem, 1.1rem + 1.75vw, 2.5rem);
    --space-8: clamp(1.75rem, 1.2rem + 2.25vw, 3rem);
    --space-9: clamp(2rem, 1.2rem + 3.5vw, 4rem);

    /* --- Radii -------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* --- Borders ------------------------------------------ */
    --border-width: 1px;
    --border-width-thick: 2px;

    /* --- Layout ------------------------------------------- */
    --nav-height: 64px;
    --nav-height-mobile: 56px;
    --content-max: 1200px;
    --page-gutter: 1rem;
    --page-gutter-lg: 2rem;

    /* --- Motion ------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 420ms;
    --duration-reveal: 700ms;

    /* --- Z-index ------------------------------------------ */
    --z-nav: 100;
    --z-overlay: 200;
}

/* --- Breakpoints -----------------------------------------
   Custom properties cannot be used in media queries, so these
   values are documented here and written literally in CSS:
     sm  480px   -- large phone
     md  768px   -- tablet / nav collapse point
     lg  1024px  -- small laptop
     xl  1280px  -- desktop
   --------------------------------------------------------- */