metis-desk/apps/web/src/global.css

@import "@repo/shadcn-ui/globals.css";

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("./fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/jetbrains-mono-regular.woff2") format("woff2");
}

@source "../../../modules";
@source "../../../packages/rdx-ui/src";
@source "../../../packages/shadcn-ui/src/components";

/* El shell conserva su identidad visual sin alterar los tokens semánticos del vendor. */
@theme {
  --breakpoint-shell: 768px;
  --breakpoint-inventory: 1100px;
  --breakpoint-dashboard: 1200px;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  --color-shell-exterior: #000;
  --color-shell-content: var(--color-background);
  --color-shell-header: #fff;
  --color-shell-sidebar: #0e282c;
  --color-shell-sidebar-top: #0c252a;
  --color-shell-sidebar-bottom: #102c30;
  --color-shell-sidebar-foreground: #f4f7f7;
  --color-shell-sidebar-muted: rgb(255 255 255 / 82%);
  --color-shell-accent: #00d2c1;
  --color-shell-active-start: rgb(0 188 177 / 40%);
  --color-shell-active-end: rgb(0 128 130 / 45%);
  --color-shell-navy: #0c2850;
  --color-shell-muted-navy: #607895;
  --color-shell-border: #d1d9e2;
  --color-shell-search-icon: #1d3e6e;
  --radius-shell-control: 8px;
  --radius-shell-popover: 10px;
  --radius-shell: 20px;
  --radius-panel: 12px;
  --spacing-shell-sidebar: 228px;
  --spacing-shell-sidebar-inset: 20px;
  --spacing-shell-sidebar-collapsed: 72px;
  --spacing-shell-header: 88px;
  --spacing-shell-search: 41px;
  --spacing-shell-navigation: 48px;
  --spacing-shell-avatar: 35px;
  --shadow-shell-popover: 0 3px 12px rgb(12 40 80 / 8%);
}

/* Enlaces de contenido y controles que navegan: criterio común en toda la aplicación. */
@layer components {
  .app-link {
    color: var(--primary);
    cursor: pointer;
    text-underline-offset: 4px;
  }

  .app-link:hover {
    text-decoration-line: underline;
  }

  .app-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }

  .app-link:disabled,
  .app-link[data-disabled],
  .app-link[aria-disabled="true"] {
    cursor: default;
    text-decoration-line: none;
  }
}

/* Los diálogos necesitan separarse visualmente del fondo y de la capa de
   superposición sin depender de una variante concreta de formulario. */
[data-slot="dialog-content"] {
  box-shadow:
    0 18px 45px rgb(12 40 80 / 16%),
    0 4px 12px rgb(12 40 80 / 10%);
}

/* El diálogo activo necesita un límite inequívoco cuando aparece sobre otro. */
[data-slot="dialog-content"] {
  border: 1px solid color-mix(in oklch, var(--foreground) 1%, var(--border));
  box-shadow:
    0 24px 60px rgb(12 40 80 / 24%),
    0 8px 18px rgb(12 40 80 / 14%),
    0 0 0 1px rgb(12 40 80 / 8%);
}

[data-slot="dialog-content"] [data-slot="dialog-header"] {
  background-color: var(--popover);
}