/* ==========================================================================
   Cloudy Meco — theme.css
   ÚNICO sitio con identidad (Regla 4). Solo custom properties en :root.
   Origen de cada valor y ratios de contraste: docs/02-design-system.md
   Un color literal fuera de este fichero es un bug.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. Paleta base (valores medidos en la fuente) ---------- */

  /* Personaje (images/*.jpg) */
  --cloudy-highlight: #D1EFF5;   /* brillo del cuerpo */
  --cloudy-body: #A4DBEB;        /* celeste del cuerpo — NUNCA como texto */
  --cloudy-outline: #209BE0;     /* contorno azul intenso — decorativo */
  --cloudy-iris: #42029B;        /* iris morado */
  --cloudy-cheek: #F23CD6;       /* mejillas — decorativo */
  --cloudy-mouth: #AE072E;       /* contorno de la boca — decorativo */
  --cloudy-ink: #1E295E;         /* contorno de ojos / pestañas */

  /* Deck (style/*.pptx, colores usados en las diapositivas) */
  --deck-purple: #645CA7;
  --deck-pink: #D77EAD;          /* NUNCA como texto sobre claro */
  --deck-lavender: #AFA8D0;      /* fondo de las diapositivas */
  --deck-teal: #00C3B1;          /* NUNCA como texto */
  --deck-gray: #434343;
  --deck-white: #FFFFFF;

  /* Derivados: mismo tono, luminosidad bajada para cumplir AA como texto */
  --derived-purple-strong: #4E4884;  /* deck-purple, L=40 % */
  --derived-pink-deep: #9C3069;      /* deck-pink,   L=40 % */
  --derived-blue-deep: #166C9D;      /* cloudy-outline, L=35 % */
  --derived-teal-deep: #00756A;      /* deck-teal,   L=23 % */
  --derived-sky: #F1FAFC;            /* 30 % cloudy-highlight + 70 % blanco */
  --derived-lavender-soft: #EFEEF6;  /* 20 % deck-lavender + 80 % blanco */

  /* ---------- 2. Tokens semánticos (lo que usa base.css) ---------- */

  /* Fondos */
  --color-bg: var(--derived-sky);              /* fondo de página */
  --color-surface: var(--deck-white);          /* tarjetas, fichas */
  --color-bg-alt: var(--derived-lavender-soft);/* secciones alternas */
  --color-bg-band: var(--deck-lavender);       /* bandas; solo con --color-text */
  --color-bg-sky: var(--cloudy-highlight);     /* bloques "cielo" */

  /* Texto */
  --color-text: var(--cloudy-ink);             /* 12.92:1 sobre --color-bg */
  --color-text-muted: var(--deck-gray);        /* 9.34:1; no sobre lavanda */
  --color-text-on-primary: var(--deck-white);  /* 5.78:1 sobre primario */
  --color-heading: var(--cloudy-ink);
  --color-accent-text: var(--derived-pink-deep);  /* 6.52:1; antetítulos */
  --color-science-text: var(--derived-blue-deep); /* 5.41:1; etiquetas ciencia */
  --color-health-text: var(--derived-teal-deep);  /* 5.28:1; retos saludables */

  /* Acción */
  --color-primary: var(--deck-purple);              /* botones, enlaces */
  --color-primary-hover: var(--derived-purple-strong);
  --color-link: var(--deck-purple);                 /* 5.46:1 */
  --color-link-hover: var(--derived-purple-strong); /* 7.67:1 */
  --color-focus: var(--derived-purple-strong);      /* 7.67:1, ≥ 3:1 */

  /* Bordes */
  --color-border: var(--deck-lavender);              /* decorativo */
  --color-border-strong: var(--derived-blue-deep);   /* controles, 5.41:1 */

  /* Decorativos (nunca texto, nunca único portador de información) */
  --color-cloud-fill: var(--cloudy-highlight);
  --color-cloud-body: var(--cloudy-body);
  --color-cloud-outline: var(--cloudy-outline);
  --color-cheek: var(--cloudy-cheek);
  --color-sparkle: var(--deck-teal);
  --color-decor-pink: var(--deck-pink);

  /* Degradados */
  --gradient-deck: linear-gradient(135deg, var(--deck-purple) 0%, var(--deck-pink) 100%);
  --gradient-sky: linear-gradient(180deg, var(--cloudy-highlight) 0%, var(--derived-sky) 100%);
  --gradient-cloud: radial-gradient(circle at 35% 30%, var(--deck-white) 0%, var(--cloudy-highlight) 45%, var(--cloudy-body) 100%);

  /* ---------- 3. Tipografía (solo sistema, sin @font-face) ---------- */
  --font-body: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round",
    "Quicksand", "Arial Rounded MT Bold", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold",
    "Nunito", "Varela Round", "Quicksand", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --text-body: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);  /* 18 → 20 px */
  --text-small: 1rem;                                       /* 16 px, mínimo absoluto */
  --text-lead: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20 → 24 px */
  --text-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);     /* 22 → 28 px */
  --text-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);        /* 28 → 40 px */
  --text-h1: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);        /* 36 → 56 px */
  --text-display: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);     /* 44 → 72 px */

  --weight-body: 400;
  --weight-strong: 700;
  --weight-heading: 800;

  --leading-body: 1.6;
  --leading-heading: 1.15;
  --tracking-heading: -0.01em;
  --measure: 62ch;

  /* ---------- 4. Espaciado (base 4 px) ---------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --container: 72rem;  /* 1152 px */

  /* ---------- 5. Táctil ---------- */
  --tap-min: 44px;              /* alto/ancho mínimo de botón o enlace-botón */
  --tap-gap: var(--space-2);    /* separación mínima entre dianas */

  /* ---------- 6. Radios (formas blandas) ---------- */
  --radius-sm: 0.5rem;   /*  8 */
  --radius-md: 1rem;     /* 16 */
  --radius-lg: 1.5rem;   /* 24 */
  --radius-xl: 2rem;     /* 32 */
  --radius-pill: 999px;
  --radius-cloud: 48% 52% 44% 56% / 62% 58% 42% 38%; /* tarjeta "nube" */

  /* ---------- 7. Bordes y sombras ---------- */
  --border-width: 2px;
  --border-cloud: 3px solid var(--cloudy-outline);  /* contorno del personaje */

  --shadow-sm: 0 1px 2px rgb(30 41 94 / 0.08), 0 2px 6px rgb(30 41 94 / 0.06);
  --shadow-md: 0 6px 18px rgb(100 92 167 / 0.16);
  --shadow-lg: 0 16px 40px rgb(100 92 167 / 0.22);
  --shadow-press: 0 4px 0 var(--derived-purple-strong);   /* botón "gordito" */
  --shadow-cloud: 0 10px 0 -4px rgb(32 155 224 / 0.18), 0 18px 30px rgb(32 155 224 / 0.14);
  --focus-ring: 0 0 0 3px var(--deck-white), 0 0 0 6px var(--derived-purple-strong);

  /* ---------- 8. Movimiento ---------- */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --ease-soft: cubic-bezier(0.34, 1.3, 0.64, 1);   /* rebote suave */
  --float-distance: 6px;                            /* flotar de la nube */

  /* ---------- 9. Motivo de nube (SVG inline, < 1 KB) ---------- */
  /* Versión color: contorno azul + relleno degradado, como el personaje */
  --cloud-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 112 76'%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='46' cy='22' r='72'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23D1EFF5'/%3E%3Cstop offset='1' stop-color='%23A4DBEB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='%23209BE0' stroke='%23209BE0' stroke-width='6' stroke-linejoin='round'%3E%3Ccircle cx='30' cy='48' r='20'/%3E%3Ccircle cx='56' cy='32' r='26'/%3E%3Ccircle cx='86' cy='42' r='22'/%3E%3Crect x='24' y='44' width='76' height='26' rx='13'/%3E%3C/g%3E%3Cg fill='url(%23g)'%3E%3Ccircle cx='30' cy='48' r='20'/%3E%3Ccircle cx='56' cy='32' r='26'/%3E%3Ccircle cx='86' cy='42' r='22'/%3E%3Crect x='24' y='44' width='76' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E");
  /* Versión máscara: solo la forma (mask-image + background-color) */
  --cloud-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 112 76'%3E%3Cg fill='%23000'%3E%3Ccircle cx='30' cy='48' r='23'/%3E%3Ccircle cx='56' cy='32' r='29'/%3E%3Ccircle cx='86' cy='42' r='25'/%3E%3Crect x='21' y='41' width='82' height='32' rx='16'/%3E%3C/g%3E%3C/svg%3E");
  --cloud-ratio: 112 / 76;
  /* Borde inferior ondulado para separar secciones (máscara repetible) */
  --cloud-edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath d='M0 20V10a10 10 0 0 1 20 0a10 10 0 0 1 20 0a10 10 0 0 1 20 0a10 10 0 0 1 20 0v10z'/%3E%3C/svg%3E");
  --cloud-edge-size: 80px 20px;
}