/* =========================================================
   FASSIARA · Design tokens
   Fuente: Manual de Identidad Corporativa 2025
   Paleta de marca: #F28E79 · #FCE76A · #F0C970 · #F8BAA4
   Tipografía de marca: Century Gothic (fallback: Questrial)
   ========================================================= */
:root {
  /* ---- Marca (manual) ---- */
  --brand-coral: #F28E79;
  --brand-peach: #F8BAA4;
  --brand-yellow: #FCE76A;
  --brand-gold: #F0C970;

  /* ---- Derivados para accesibilidad (WCAG AA) ---- */
  --coral-700: #A84A36;   /* texto/enlaces sobre claro · 5.7:1 */
  --coral-600: #C9634D;
  --coral-500: var(--brand-coral);
  --coral-300: var(--brand-peach);
  --coral-100: #FDE3DA;
  --coral-50:  #FFF4EF;
  --gold-500:  var(--brand-gold);
  --gold-300:  var(--brand-yellow);
  --gold-100:  #FEF7D6;

  /* ---- Neutros cálidos ---- */
  --ink-900: #3A2622;     /* texto principal · 14:1 sobre blanco */
  --ink-700: #6E5650;     /* texto secundario · 6.7:1 */
  --ink-500: #9C847D;
  --ink-200: #E9DCD6;
  --ink-100: #F4ECE8;
  --cream:   #FFF8F4;
  --white:   #FFFFFF;

  /* ---- Semánticos ---- */
  --success: #2F7A55;
  --success-bg: #E5F4EC;
  --warning: #8A6100;
  --warning-bg: #FEF3D2;
  --danger:  #B3261E;
  --danger-bg: #FCE8E6;
  --info:    #2B5D8A;
  --info-bg: #E6EFF8;

  /* ---- Roles ---- */
  --bg: var(--cream);
  --surface: var(--white);
  --surface-alt: var(--coral-50);
  --text: var(--ink-900);
  --text-muted: var(--ink-700);
  --border: var(--ink-200);
  --accent: var(--coral-700);
  --focus: #2B5D8A;

  /* ---- Tipografía · escala de 9 pasos (ratio 1.25) ---- */
  --font-brand: "Century Gothic", "CenturyGothic", "Questrial", "AppleGothic", sans-serif;
  --font-body: "Century Gothic", "CenturyGothic", "Questrial", "Helvetica Neue", Arial, sans-serif;
  --fs-1: 0.75rem;   /* 12  caption / overline */
  --fs-2: 0.875rem;  /* 14  small */
  --fs-3: 1rem;      /* 16  body */
  --fs-4: 1.125rem;  /* 18  lead */
  --fs-5: 1.375rem;  /* 22  h4 */
  --fs-6: 1.75rem;   /* 28  h3 */
  --fs-7: clamp(1.875rem, 1.4rem + 1.6vw, 2.25rem);  /* 36 h2 */
  --fs-8: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);      /* 48 h1 interno */
  --fs-9: clamp(2.6rem, 1.6rem + 4.4vw, 4.5rem);     /* 72 display */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --tracking-wide: 0.18em;

  /* ---- Espaciado · base 8px ---- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;

  /* ---- Forma y elevación ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(58, 38, 34, .06), 0 2px 8px rgba(58, 38, 34, .05);
  --shadow-2: 0 8px 24px rgba(58, 38, 34, .08), 0 2px 6px rgba(58, 38, 34, .05);
  --shadow-3: 0 24px 56px rgba(58, 38, 34, .14);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;  /* micro: hover, focus */
  --dur-2: 220ms;  /* componentes */
  --dur-3: 420ms;  /* paneles, modales */
  --dur-4: 800ms;  /* entradas de sección */

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
}

/* Modo oscuro (sigue la preferencia del sistema, o data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1513;
    --surface: #2A1E1B;
    --surface-alt: #33241F;
    --text: #FBEFEA;
    --text-muted: #D5C0B8;
    --border: #4A3833;
    --accent: var(--brand-peach);
    --focus: #8EC1F0;
    --ink-100: #33241F;
    --coral-50: #33241F;
    --coral-100: #4A2F28;
    --gold-100: #3E3320;
    --success-bg: #1C3328; --success: #8FD6AE;
    --warning-bg: #3A2F14; --warning: #F2CF7A;
    --danger-bg: #3D1E1B;  --danger: #F2A49D;
    --info-bg: #1B2A3A;    --info: #9CC4EA;
  }
}
:root[data-theme="dark"] {
  --bg: #1E1513;
  --surface: #2A1E1B;
  --surface-alt: #33241F;
  --text: #FBEFEA;
  --text-muted: #D5C0B8;
  --border: #4A3833;
  --accent: var(--brand-peach);
  --focus: #8EC1F0;
  --ink-100: #33241F;
  --coral-50: #33241F;
  --coral-100: #4A2F28;
  --gold-100: #3E3320;
  --success-bg: #1C3328; --success: #8FD6AE;
  --warning-bg: #3A2F14; --warning: #F2CF7A;
  --danger-bg: #3D1E1B;  --danger: #F2A49D;
  --info-bg: #1B2A3A;    --info: #9CC4EA;
}