/* =====================================================================
   SafeShare — Design tokens
   Única fuente de verdad del sistema visual. Ningún otro fichero CSS
   debería declarar colores, tamaños o duraciones en crudo.
   Sistema inspirado en el design system de Cabify (escalas de color por
   tono, tipografía por pasos, espaciado y radios discretos, movimiento
   corto con easing "out"), aplicado a la identidad de SafeShare: naranja
   claro como acento y fondo blanco hueso con neutros cálidos.

   Nota de contraste: el naranja de acento es claro, así que el texto
   sobre él es OSCURO (--color-text-on-brand) y, como texto sobre fondo
   claro, se usa un naranja más profundo (--color-accent-text). Nunca
   uses --color-accent para texto.
   ===================================================================== */

:root {
  /* ---------- Escalas crudas (no usar directamente en componentes) ---------- */
  --o-100: #3a1a05; --o-90: #5c2a0a; --o-80: #7d3a0d; --o-70: #a34c10;
  --o-60: #c85f14;  --o-50: #ef8a3c; --o-40: #f5a25e; --o-30: #f9c08a;
  --o-20: #fcdcbb;  --o-10: #fdefe0; --o-0: #fef8f1;

  --n-100: #1f1811; --n-90: #2e251c; --n-80: #3f342a; --n-70: #524539;
  --n-60: #6b5d4f;  --n-50: #877868; --n-40: #a69787; --n-30: #c5b8a9;
  --n-20: #e1d8cc;  --n-10: #efe9df; --n-0: #f7f3ec;

  --g-60: #017251; --g-50: #0c936b; --g-20: #96efcb; --g-10: #dafaeb; --g-0: #ecfcf5;
  --r-60: #bf2721; --r-50: #e74a41; --r-20: #fad4d3; --r-10: #fdf0ef;
  --y-60: #8b5908; --y-50: #ad7708; --y-20: #fddb61; --y-10: #fff3c6;

  /* ---------- Tokens semánticos ---------- */
  --color-accent: var(--o-50);              /* rellenos: botones, tarjeta de marca */
  --color-accent-hover: var(--o-40);
  --color-accent-text: var(--o-70);         /* texto e iconos de acento sobre fondo claro */
  --color-accent-text-hover: var(--o-60);
  --color-accent-strong: var(--n-100);
  --color-accent-strong-hover: var(--n-90);

  --color-bg: var(--n-0);                   /* blanco hueso */
  --color-bg-subdued: var(--n-10);          /* bloques redondeados */
  --color-card: #fdfbf7;                    /* tarjetas e inputs: un punto más claro que el fondo */
  --color-surface: var(--o-10);             /* chips y botones secundarios */
  --color-surface-hover: var(--o-20);
  --color-header-bg: rgba(247, 243, 236, 0.88);

  --color-text: var(--n-100);
  --color-text-secondary: var(--n-60);
  --color-text-brand: var(--o-90);
  --color-text-on-brand: var(--o-100);
  --color-text-on-brand-muted: var(--o-90);
  --color-on-brand-chip: rgba(58, 26, 5, 0.10);

  --color-footer-bg: var(--n-100);
  --color-footer-text: var(--n-0);
  --color-footer-muted: var(--n-30);
  --color-footer-chip: rgba(255, 255, 255, 0.12);

  --color-border: var(--n-20);
  --color-border-hover: var(--n-30);
  --color-focus-ring: var(--o-20);

  --color-success: var(--g-60);
  --color-success-bg: var(--g-0);
  --color-success-border: var(--g-20);
  --color-danger: var(--r-60);
  --color-danger-bg: var(--r-10);
  --color-danger-border: var(--r-20);
  --color-warning: var(--y-60);
  --color-warning-bg: var(--y-10);
  --color-warning-border: var(--y-20);

  /* ---------- Tipografía ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-3xl: 40px; --lh-3xl: 48px;
  --fs-2xl: 32px; --lh-2xl: 40px;
  --fs-xl: 24px;  --lh-xl: 32px;
  --fs-l: 20px;   --lh-l: 28px;
  --fs-m: 18px;   --lh-m: 26px;
  --fs-s: 16px;   --lh-s: 24px;
  --fs-xs: 14px;  --lh-xs: 22px;
  --fs-2xs: 12px; --lh-2xs: 16px;

  /* ---------- Espaciado ---------- */
  --sp-3xs: 4px;  --sp-2xs: 8px;  --sp-xs: 12px; --sp-s: 16px;
  --sp-m: 24px;   --sp-l: 36px;   --sp-xl: 48px; --sp-2xl: 72px; --sp-3xl: 120px;
  --section-gap: var(--sp-2xl);
  --block-pad: 64px;

  /* ---------- Radios ---------- */
  --radius-2xs: 6px; --radius-xs: 8px;  --radius-s: 16px; --radius-m: 24px;
  --radius-l: 32px;  --radius-xl: 48px; --radius-2xl: 64px; --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-soft: 0 8px 40px rgba(62, 50, 30, 0.05);
  --shadow-card: 0 8px 40px rgba(62, 50, 30, 0.10);
  --shadow-float: 0 0 40px rgba(62, 50, 30, 0.16);

  /* ---------- Movimiento ---------- */
  --dur-faster: 0.125s;
  --dur-fast: 0.25s;
  --dur-normal: 0.5s;
  --dur-slow: 0.75s;
  --ease-out: ease-out;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-cta:
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);

  /* ---------- Medidas de componentes ---------- */
  --cta-h-m: 56px;
  --cta-h-s: 40px;
  --header-h: 72px;
  --container: 1200px;
  --gutter: var(--sp-m);
  --icon-xs: 16px; --icon-s: 20px; --icon-m: 24px; --icon-l: 32px;
  --z-header: 20;
  --z-toast: 60;

  color-scheme: light;
}

/* =====================================================================
   Temas de color
   Un tema solo redefine la escala de acento cruda (--o-*) y el tinte de
   los chips sobre la tarjeta de marca. Todos los tokens semánticos
   (--color-accent, --color-accent-text, --color-surface...) derivan de
   esa escala, así que cambian en bloque sin tocar ningún componente.
   La escala neutra cálida (--n-*) se mantiene como lienzo común.
   El tema por defecto (naranja) vive en :root; "orange" no necesita
   bloque propio. Todas las paletas están calibradas para cumplir el
   contraste AA en texto de acento, botones y chips.
   ===================================================================== */
html[data-theme="coral"] {
  --o-100: #380d05; --o-90: #5c160a; --o-80: #7d1e0d; --o-70: #a22610;
  --o-60: #c82f14;  --o-50: #ef583e; --o-40: #f5735c; --o-30: #f99b8b;
  --o-20: #fcc4ba;  --o-10: #fde6e2; --o-0: #fef3f1;
  --color-on-brand-chip: rgba(56, 13, 5, 0.10);
}
html[data-theme="amber"] {
  --o-100: #382a05; --o-90: #5c450a; --o-80: #7d5d0d; --o-70: #8e690e;
  --o-60: #c89514;  --o-50: #efbd3e; --o-40: #f5c95c; --o-30: #f9da8b;
  --o-20: #fceaba;  --o-10: #fdf6e2; --o-0: #fefaf1;
  --color-on-brand-chip: rgba(56, 42, 5, 0.10);
}
html[data-theme="green"] {
  --o-100: #0b321b; --o-90: #14522e; --o-80: #1b6f3e; --o-70: #1e7e46;
  --o-60: #2ab162;  --o-50: #54d98b; --o-40: #6fe29f; --o-30: #98ebbb;
  --o-20: #c3f4d7;  --o-10: #e6faee; --o-0: #f2fcf7;
  --color-on-brand-chip: rgba(11, 50, 27, 0.10);
}
html[data-theme="teal"] {
  --o-100: #093430; --o-90: #10564f; --o-80: #15746b; --o-70: #167b71;
  --o-60: #21baab;  --o-50: #4be2d3; --o-40: #67e9dc; --o-30: #93f1e7;
  --o-20: #bff7f2;  --o-10: #e4fbf9; --o-0: #f2fdfc;
  --color-on-brand-chip: rgba(9, 52, 48, 0.10);
}
html[data-theme="blue"] {
  --o-100: #061f37; --o-90: #0c345a; --o-80: #10477a; --o-70: #145c9f;
  --o-60: #1870c3;  --o-50: #4299eb; --o-40: #60abf1; --o-30: #8dc4f6;
  --o-20: #bcdcfb;  --o-10: #e3f0fc; --o-0: #f1f8fe;
  --color-on-brand-chip: rgba(6, 31, 55, 0.10);
}
html[data-theme="indigo"] {
  --o-100: #090e34; --o-90: #101856; --o-80: #152174; --o-70: #1b2a97;
  --o-60: #2133ba;  --o-50: #6574e6; --o-40: #6777e9; --o-30: #939ef1;
  --o-20: #bfc6f7;  --o-10: #e4e7fb; --o-0: #f2f3fd;
  --color-on-brand-chip: rgba(9, 14, 52, 0.10);
}
html[data-theme="purple"] {
  --o-100: #210c31; --o-90: #371650; --o-80: #4a1d6d; --o-70: #60258e;
  --o-60: #762dae;  --o-50: #a663d9; --o-40: #b071df; --o-30: #c79ae9;
  --o-20: #dec4f3;  --o-10: #f1e6f9; --o-0: #f8f3fc;
  --color-on-brand-chip: rgba(33, 12, 49, 0.10);
}
html[data-theme="pink"] {
  --o-100: #330a1f; --o-90: #541233; --o-80: #711845; --o-70: #941f59;
  --o-60: #b6266e;  --o-50: #de4f96; --o-40: #e56ba8; --o-30: #ee96c2;
  --o-20: #f6c1db;  --o-10: #fae5f0; --o-0: #fdf2f7;
  --color-on-brand-chip: rgba(51, 10, 31, 0.10);
}
html[data-theme="slate"] {
  --o-100: #1a1e23; --o-90: #2c323a; --o-80: #3c444e; --o-70: #4e5865;
  --o-60: #5f6c7c;  --o-50: #8895a5; --o-40: #9ca7b5; --o-30: #b9c1cb;
  --o-20: #d6dbe1;  --o-10: #eeeff2; --o-0: #f6f7f8;
  --color-on-brand-chip: rgba(26, 30, 35, 0.10);
}

@media (max-width: 767px) {
  :root {
    --section-gap: var(--sp-xl);
    --block-pad: var(--sp-l);
    --fs-3xl: 32px; --lh-3xl: 40px;
    --fs-2xl: 28px; --lh-2xl: 36px;
    --fs-xl: 22px;  --lh-xl: 30px;
    --header-h: 64px;
    --gutter: var(--sp-s);
  }
}