hyb-oa/client/src/index.css

/*
  Design tokens source:
  - aligned to R29 semantic workbench system
*/

@import "@material-symbols/font-400/outlined.css";
@import "./styles/mobile-touch.css";
@import "./design/theme.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    color-scheme: light;
  }

  body {
    background: var(--color-bg-canvas);
    color: var(--color-text-primary);
    @apply font-sans antialiased selection:bg-zinc-900 selection:text-white;
  }

  #root {
    @apply min-h-screen flex flex-col;
  }

  summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  .layout-container {
    @apply mx-auto w-full px-4 sm:px-6 lg:px-8;
  }

  .page-scaffold {
    @apply space-y-6;
  }

  .workbench-hero {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.03), rgba(255, 255, 255, 0.96));
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    @apply flex flex-col gap-4 px-6 py-6 md:flex-row md:items-end md:justify-between;
  }

  .workbench-hero__eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
  }

  .workbench-hero__title {
    @apply mt-2 text-3xl font-semibold tracking-tight text-zinc-900;
  }

  .workbench-hero__subtitle {
    @apply mt-2 max-w-3xl text-sm leading-6 text-zinc-600;
  }

  .card-std {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-sm);
  }

  .card-title {
    @apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
  }

  .card-desc {
    @apply mt-2 text-sm leading-6 text-zinc-600;
  }

  .card-value {
    @apply text-3xl font-semibold tracking-tight text-zinc-900;
  }

  .section-panel {
    @apply p-6;
  }

  .section-panel__header {
    @apply flex flex-wrap items-start justify-between gap-3;
  }

  .section-panel__title {
    @apply text-base font-semibold text-zinc-900;
  }

  .section-panel__desc {
    @apply mt-1 text-sm text-zinc-500;
  }

  .section-panel__body {
    @apply mt-5;
  }

  .metric-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply block px-5 py-5 transition-colors hover:bg-zinc-50;
  }

  .metric-card--warning {
    @apply border-amber-200 bg-amber-50 hover:bg-amber-100;
  }

  .metric-card--danger {
    @apply border-red-200 bg-red-50 hover:bg-red-100;
  }

  .metric-card__title {
    @apply text-sm font-medium text-zinc-500;
  }

  .metric-card__value {
    @apply mt-2 text-2xl font-semibold tracking-tight text-zinc-900;
  }

  .metric-card__note {
    @apply mt-2 text-sm text-zinc-500;
  }

  .info-chip {
    @apply inline-flex items-center rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-600;
  }

  .surface-muted {
    @apply rounded-2xl border border-zinc-200 bg-zinc-50;
  }

  .input-std {
    @apply h-11 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
  }

  .select-std {
    @apply h-11 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
  }

  .select-sm {
    @apply h-8 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
  }

  .table-container {
    @apply overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm;
  }

  .table-header {
    @apply border-b border-zinc-100 bg-zinc-50/70;
  }

  .table-th {
    @apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500;
  }

  .table-row {
    @apply transition-colors hover:bg-zinc-50/80;
  }

  .table-td {
    @apply px-6 py-4 text-sm text-zinc-600;
  }

  .table-td-strong {
    @apply px-6 py-4 text-sm font-semibold text-zinc-900;
  }

  .page-shell-grid {
    @apply grid gap-6 xl:grid-cols-[minmax(0,1fr),360px];
  }

  .detail-shell-grid {
    @apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
  }

  .badge-success {
    @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
  }

  .badge-warning {
    @apply inline-flex items-center rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-inset ring-amber-600/10;
  }

  .badge-error {
    @apply inline-flex items-center rounded-full bg-red-50 px-2.5 py-0.5 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-600/10;
  }

  .badge-neutral {
    @apply inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
  }
}