:root,
[data-theme="obsidian"] {
  color-scheme: dark;

  /* Tipografía */
  --font-display: "Söhne", "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Paleta principal */
  --color-obsidian: #0a0d14;
  --color-anti-obsidian: rgb(214 226 239 / 66%);
  --color-navy: #0c1b33;
  --color-surface: #0b1a2d;
  --color-surface-raised: #10243b;
  --color-surface-soft: rgb(255 255 255 / 7.5%);

  --color-electric: #00a3ff;
  --color-electric-soft: rgb(0 163 255 / 8%);
  --color-border-electric: rgb(0 163 255 / 24%);

  --color-gold: #f2b705;
  --color-steel: #a8b0b8;

  --color-text: #f3f7fb;
  --color-text-muted: rgb(214 226 239 / 66%);
  --color-border: rgb(79 145 205 / 23%);
  --color-border-gold: rgb(242 183 5 / 34%);

  /* Estados */
  --color-success: #3bd197;
  --color-warning: #f2b705;
  --color-danger: #ff6170;

  /* Fondos semánticos */
  --background-app:
    radial-gradient(circle at 82% 0%, rgb(0 163 255 / 9%), transparent 28%),
    radial-gradient(circle at 12% 100%, rgb(242 183 5 / 4%), transparent 24%),
    linear-gradient(145deg, #0c1b33, #0a0d14 48%);

  --background-topbar:
    linear-gradient(145deg,
      rgb(15 34 57 / 94%),
      rgb(6 14 29 / 97%));

  --background-workspace:
    radial-gradient(circle at 86% 4%, rgb(0 163 255 / 5%), transparent 28%),
    linear-gradient(145deg,
      rgb(10 22 39 / 92%),
      rgb(4 10 20 / 96%));

  --background-subheader:
    linear-gradient(180deg,
      rgb(9 21 38 / 98%),
      rgb(6 15 29 / 97%));

  --background-card:
    linear-gradient(145deg,
      rgb(14 31 52 / 94%),
      rgb(5 12 25 / 97%));

  --background-card-header:
    linear-gradient(90deg,
      rgb(0 163 255 / 8%),
      transparent 70%);

  --background-shortcuts: rgb(242 183 5 / 3%);
  --background-control: rgb(2 10 22 / 62%);
  --background-control-focus: rgb(3 14 30 / 90%);

  --background-modal:
    linear-gradient(145deg,
      rgb(14 31 52 / 98%),
      rgb(5 12 25 / 99%));

  --background-overlay: rgb(2 7 17 / 82%);
  --background-hover: rgb(255 255 255 / 4%);

  /* Scrollbars */
  --scrollbar-track: rgb(4 11 22 / 55%);
  --scrollbar-thumb: rgb(62 112 154 / 48%);
  --scrollbar-thumb-hover: rgb(0 163 255 / 68%);

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-soft: 0 28px 75px rgb(0 0 0 / 48%);
  --shadow-electric:
    0 0 0 1px rgb(0 163 255 / 12%),
    0 18px 50px rgb(0 94 170 / 18%);
  --shadow-card:
    0 14px 34px rgb(0 0 0 / 16%),
    0 0 0 1px rgb(0 163 255 / 5%);

  --color-shadow-soft: rgb(0 0 0 / 26%);

  /* Movimiento */
  --transition-fast: 160ms ease;
  --transition-medium: 220ms ease;

  /* Escala tipográfica */
  --text-xs: 0.72rem;
  --text-sm: 0.78rem;
  --text-md: 0.9rem;
  --text-lg: 1rem;
  --text-xl: 1.5rem;

  /* Tracking */
  --tracking-display: 0.22em;
  --tracking-heading: 0.08em;
  --tracking-label: 0.045em;
  --tracking-body: 0.01em;

  /* Botones estándar */
  --color-std-button-crear: rgba(57, 157, 102, 1.0);
  --color-std-button-consultar: rgb(214, 226, 239, 0.66);
  --color-std-button-modificar: rgb(0, 163, 255, 1.0);
  --color-std-button-duplicar: rgba(116, 66, 155, 1.0);
  --color-std-button-eliminar: rgba(169, 18, 18, 1.0);
  --color-std-button-guardar: rgb(99, 101, 104, 1.0); 
  --color-std-button-salir: rgba(61, 77, 92, 1.0); 
  
}

[data-theme="light"] {
  color-scheme: light;

  --color-obsidian: #f4f7fb;
  --color-anti-obsidian: #0a0d14;
  --color-navy: #e8eef6;
  --color-surface: #ffffff;
  --color-surface-raised: #edf3f9;
  --color-surface-soft: rgb(13 42 70 / 1%);

  --color-electric: #007fc7;
  --color-electric-soft: rgb(0 127 199 / 9%);
  --color-border-electric: rgb(0 127 199 / 25%);

  --color-gold: #a97400;
  --color-steel: #667483;

  --color-text: #122033;
  --color-text-muted: rgb(18 32 51 / 62%);
  --color-border: rgb(33 80 119 / 18%);
  --color-border-gold: rgb(169 116 0 / 30%);

  --color-success: #157c59;
  --color-warning: #956900;
  --color-danger: #c33d4c;

  --background-app:
    radial-gradient(circle at 82% 0%, rgb(0 127 199 / 8%), transparent 30%),
    radial-gradient(circle at 12% 100%, rgb(169 116 0 / 5%), transparent 24%),
    linear-gradient(145deg, #eef4fa, #f9fbfd 48%);

  --background-topbar:
    linear-gradient(145deg,
      rgb(255 255 255 / 97%),
      rgb(241 246 251 / 99%));

  --background-workspace:
    radial-gradient(circle at 86% 4%, rgb(0 127 199 / 5%), transparent 28%),
    linear-gradient(145deg,
      #f8fbfd,
      #edf3f8);

  --background-subheader:
    linear-gradient(180deg,
      rgb(255 255 255 / 99%),
      rgb(244 248 252 / 98%));

  --background-card:
    linear-gradient(145deg,
      #ffffff,
      #f5f9fc);

  --background-card-header:
    linear-gradient(90deg,
      rgb(0 127 199 / 8%),
      transparent 70%);

  --background-shortcuts: rgb(169 116 0 / 4%);
  --background-control: rgb(255 255 255 / 86%);
  --background-control-focus: #ffffff;

  --background-modal:
    linear-gradient(145deg,
      #ffffff,
      #f4f8fb);

  --background-overlay: rgb(20 34 48 / 34%);
  --background-hover: rgb(0 64 105 / 5%);

  --scrollbar-track: rgb(23 54 82 / 7%);
  --scrollbar-thumb: rgb(52 94 126 / 34%);
  --scrollbar-thumb-hover: rgb(0 127 199 / 62%);

  --shadow-soft: 0 24px 65px rgb(21 48 72 / 15%);
  --shadow-electric:
    0 0 0 1px rgb(0 127 199 / 8%),
    0 16px 40px rgb(22 82 124 / 10%);
  --shadow-card:
    0 14px 32px rgb(23 55 83 / 9%),
    0 0 0 1px rgb(0 127 199 / 4%);

  --color-shadow-soft: rgb(27 54 81 / 13%);

  /* Botones estándar */
  --color-std-button-crear: rgba(57, 157, 102, 1.0);
  --color-std-button-consultar: rgb(10, 13, 20, 1.0);
  --color-std-button-modificar: rgb(0, 127, 199, 1.0);
  --color-std-button-duplicar: rgba(116, 66, 155, 1.0);
  --color-std-button-eliminar: rgba(169, 18, 18, 1.0);
  --color-std-button-guardar: rgb(10, 13, 20, 1.0);
  --color-std-button-salir: rgba(61, 77, 92, 1.0); 
}