/*
 * Tokens de diseño.
 * Para cambiar de marca basta con redefinir --primary / --accent (y, si hace falta, --primary-text
 * para el modo claro) en :root o en un selector [data-brand="…"].
 */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800&display=swap");

:root {
  --primary: #43BFFD;
  --on-primary: #0E121B;
  --accent: #FF874E;
  --danger: #FF3D4C;
  --warning: #F7B832;
  --success: #00C26E;

  --radius: 20px;
  --radius-sm: 14px;
  --font: "Urbanist", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-bounce: cubic-bezier(.3, 1.5, .5, 1);
}

/* ---------- Tema oscuro ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --page: #07090E;
  --card: #0B0E14;
  --bg: #0E121B;
  --bg-rgb: 14, 18, 27;
  --surface: #181B25;
  --surface-rgb: 24, 27, 37;
  --surface-2: #222530;
  --surface-3: #2B303B;
  --field: #151922;
  --ink: 255, 255, 255;
  --line: rgba(255, 255, 255, .07);
  --text: #F5F7FA;
  --text-2: #CACFD8;
  --muted: #999FAD;
  --muted-2: #717783;
  --inverse: #F5F7FA;
  --on-inverse: #0E121B;
  --link: #65CBFD;
  --link-hover: #BFE9FE;
  --primary-text: var(--primary);
  --sky-ink: #BFE9FE;
  --red-ink: #FF98A1;
  --yellow-ink: #FFE29B;
  --green-ink: #77ECB5;
  --orange-ink: #FFBC99;
  --shadow: rgba(0, 0, 0, .8);
  --bg-art: none;

  /* colores de acción (botones de contorno, indicadores) */
  --act-b: #409FF3;
  --act-v: #AE93FD;
  --act-o: #FF874E;
  --act-r: #FF6A77;
  --act-g: #00C26E;
  --act-y: #F7B832;
  --act-t: #00D3BB;
  --fx-on: #0E121B;
}

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  color-scheme: light;
  --page: #E4E9EF;
  --card: #F7F9FB;
  --bg: #EEF2F6;
  --bg-rgb: 238, 242, 246;
  --surface: #FFFFFF;
  --surface-rgb: 255, 255, 255;
  --surface-2: #F2F5F8;
  --surface-3: #E1E4EA;
  --field: #FFFFFF;
  --ink: 14, 18, 27;
  --line: rgba(14, 18, 27, .08);
  --text: #0E121B;
  --text-2: #2B303B;
  --muted: #525865;
  --muted-2: #717783;
  --inverse: #0E121B;
  --on-inverse: #FFFFFF;
  --link: #1C7CAB;
  --link-hover: #10528F;
  --primary-text: #1C7CAB;
  --sky-ink: #15638A;
  --red-ink: #B1232E;
  --yellow-ink: #866824;
  --green-ink: #007645;
  --orange-ink: #B05026;
  --shadow: rgba(16, 82, 143, .22);
  --bg-art: radial-gradient(120% 520px at 50% -120px, #CEE7FB 0%, rgba(206, 231, 251, 0) 100%);

  --act-b: #186DC0;
  --act-v: #6519C6;
  --act-o: #D3612D;
  --act-r: #D52B37;
  --act-g: #008D50;
  --act-y: #A7822D;
  --act-t: #008C7D;
  --fx-on: #FFFFFF;
}