/* MI CUADERNO — tokens. Única fuente de valores visuales (ver DESIGN.md).
   Las fuentes están en css/fonts.css (embebidas, generadas por tools/build-fonts.mjs). */


:root {
  color-scheme: light;

  /* Papel y tinta */
  --paper: #FFF9ED;
  --paper-shade: #F6EDDA;
  --paper-edge: #EADFC8;
  --rule: #E3DCEB;
  --rule-strong: #D3C9DF;
  --margin: #EDB9C4;
  --ink: #493D3B;
  --ink-soft: #796966;
  --ink-faint: #B3A5A0;
  --placeholder: #796966;

  /* Pasteles de papelería (fondos de objetos) */
  --butter: #F6D978;
  --blush: #F4B9C6;
  --rose: #D98FA1;
  --peach: #F4C3A2;
  --sage: #B9CBA7;
  --lavender: #C9B8DE;

  /* Hilos de ánimo (rampa ordinal validada; ver DESIGN §3.3) */
  --mood-1: #584488;
  --mood-2: #954A7E;
  --mood-3: #C15C67;
  --mood-4: #D67F46;
  --mood-5: #CAAE31;
  --mood-1-tint: color-mix(in srgb, var(--mood-1) 22%, var(--paper));
  --mood-2-tint: color-mix(in srgb, var(--mood-2) 22%, var(--paper));
  --mood-3-tint: color-mix(in srgb, var(--mood-3) 22%, var(--paper));
  --mood-4-tint: color-mix(in srgb, var(--mood-4) 24%, var(--paper));
  --mood-5-tint: color-mix(in srgb, var(--mood-5) 30%, var(--paper));

  /* Ocho hilos nominales para las emociones escritas; validados para contraste y CVD sobre --paper. */
  --emotion-1: #0A5A9A;
  --emotion-2: #3D7A2F;
  --emotion-3: #8667B9;
  --emotion-4: #CB6F4F;
  --emotion-5: #904379;
  --emotion-6: #A1790C;
  --emotion-7: #00A0A1;
  --emotion-8: #963950;

  /* Hilos de estado */
  --thread-done: #5F8150;
  --thread-partial: #BF6E3F;
  --progress-partial: #AE850F; /* D58: hilo de la estrella; el relleno pastel tiene su propio token. */
  --progress-done-fill: #B7DCC5; /* Menta pastel: relleno de progreso, separado del hilo y del texto de estado. */
  --progress-partial-fill: #F5D990; /* Manteca pastel: medio avance, con conteo y descripción accesible. */
  --thread-later: #6E5CA0;
  --thread-skip: var(--ink-soft);
  /* Mismos hilos, un punto más oscuros para texto chico (≥4.5:1 sobre papel) */
  --thread-done-text: #4E6B41;
  --thread-partial-text: #9E552B;

  /* Avisos (nunca para la vida de la persona: solo campos y acciones destructivas) */
  --error-ink: #9C4F66;   /* borde y texto de un campo con error */
  --danger: #9C5468;      /* fondo del botón-etiqueta que borra */

  /* Cantos de las cintas (un punto más oscuros que su papel) */
  --butter-deep: #B08D2A;
  --rose-deep: #C67D90;

  /* Objetos del cuaderno que no cambian con el tema: elástico de la tapa, bastidor de madera */
  --elastic: #6D4B52;
  --elastic-light: #8D6169;
  --hoop-cloth: #FBF6EA;
  --wood: #D9BC8C;
  --wood-deep: #C7A574;
  --hole: #D3C7B6;        /* agujerito vacío de la tela aida del año */

  /* Arte de los stickers: son objetos impresos con sus propios colores (no siguen el tema) */
  --st-ink: #493D3B;
  --st-paper: #FFF9ED;
  --st-cut: #FFFFFF;      /* borde blanco de corte */
  --st-butter: #F6D978;
  --st-blush: #F4B9C6;
  --st-rose: #D98FA1;
  --st-peach: #F4C3A2;
  --st-sage: #B9CBA7;
  --st-sage-deep: #7E9A6E;
  --st-lavender: #C9B8DE;
  --st-satin: #A895C4;    /* trama del raso lavanda de la mariposa de la tapa */
  --st-cloud: #EEE8F4;
  --st-wax: #FBEBC0;

  /* Impresión: siempre tinta sobre blanco, con cualquier tema */
  --print-paper: #FFFFFF;
  --print-ink: #2F2725;
  --print-ink-mid: #4F4341;
  --print-ink-soft: #796966;
  --print-rule: #D3C9DF;
  --print-faint: #CBBFBC;
  --print-rose: #D98FA1;
  --print-done: #5F8150;

  /* Tela de tapa (se redefine por [data-cover]) */
  --cloth: #6F8A6A;
  --cloth-deep: #5F7A5A;
  --cloth-light: #86A081;
  --cloth-ink: #FFF9ED;
  /* Capas de la tela: de fábrica, solo la trama. Un tema propio (A9) suma su degradado y su acabado. */
  --cloth-image: none;
  --cloth-sheen: none;
  --cloth-layers: var(--tex-cloth);

  /* Tipografía */
  --font-display: 'Young Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-text: 'Castoro', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-ui: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-hand: 'Nanum Pen Script', 'Segoe Print', 'Bradley Hand', cursive;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  --fs-cover: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --fs-hand: 1.5rem;

  --line: 1.75rem; /* interlineado de escritura = paso de renglones */

  /* Espacio */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --page-pad: clamp(20px, 4vw, 52px);
  --margin-x: 40px;

  /* Radios */
  --radius-page: 4px 10px 10px 4px;
  --radius-page-left: 10px 4px 4px 10px;
  --radius-label: 6px;
  --radius-note: 2px;

  /* Elevación */
  --shadow-page: 0 1px 0 var(--paper-edge), 0 2px 0 -1px var(--paper-shade), 0 22px 44px -26px rgb(40 30 28 / 0.55);
  --shadow-note: 0 1px 1px rgb(73 61 59 / 0.12), 0 6px 12px -6px rgb(73 61 59 / 0.28);
  --shadow-tab: 0 2px 4px -1px rgb(40 30 28 / 0.25);

  /* Motion (ver DESIGN §12) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-ui: 200ms;
  --dur-panel: 260ms;
  --dur-page: 420ms;
  --dur-cover: 900ms;
  --move: 1;      /* multiplicador de desplazamientos */
  /* Skeleton loader and reveal (transitions.dev), adaptado al cuaderno. */
  --pulse-dur: 1000ms;
  --pulse-count: infinite;
  --pulse-min: 0.5;
  --reveal-dur: var(--dur-panel);
  --reveal-ease: var(--ease-out);

  /* Foco */
  --focus: var(--ink);
  /* Texto sobre un acento lleno (marcadores, nota adhesiva): la tinta; un tema de hojas oscuras lo oscurece (A9) */
  --on-accent: var(--ink);
  /* Fondo de un campo de formulario. Ojo: los tokens que usan var() se resuelven en :root; el tema los fija aparte. */
  --field: color-mix(in srgb, var(--paper) 70%, white);

  /* Texturas (SVG en data-URI, muy sutiles) */
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .24 0 0 0 0 .23 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --tex-cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 1.5h6M0 4.5h6' stroke='%23000' stroke-opacity='.07' stroke-width='1'/%3E%3Cpath d='M1.5 0v6M4.5 0v6' stroke='%23fff' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}

/* Tapas */
[data-cover='salvia'] { --cloth: #6F8A6A; --cloth-deep: #5F7A5A; --cloth-light: #86A081; --cloth-ink: #FFF9ED; }
[data-cover='rosa'] { --cloth: #B07385; --cloth-deep: #9C6273; --cloth-light: #C48B9C; --cloth-ink: #FFF9ED; }
[data-cover='lavanda'] { --cloth: #857AA8; --cloth-deep: #736896; --cloth-light: #9A90BA; --cloth-ink: #FFF9ED; }
[data-cover='manteca'] { --cloth: #DDB450; --cloth-deep: #C99F3F; --cloth-light: #E8C56E; --cloth-ink: #493D3B; }

/* Niveles de motion */
[data-motion='suaves'] { --dur-page: 320ms; --dur-cover: 600ms; }
[data-motion='reducidas'] { --move: 0; --dur-page: 180ms; --dur-cover: 250ms; --dur-panel: 180ms; }
[data-motion='ninguna'] { --move: 0; --dur-press: 0ms; --dur-ui: 0ms; --dur-panel: 0ms; --dur-page: 0ms; --dur-cover: 0ms; }

/* Alto contraste del sistema */
@media (prefers-contrast: more) {
  :root { --ink-soft: #5A4C49; --rule: #BDB2CC; --placeholder: #5A4C49; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='completas']):not([data-motion='suaves']) { --move: 0; }
}