frontend/src/styles.css

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

:root {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: #1A2B62;
  background: #FFFFFF;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #FFFFFF;
  color: #1A2B62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: rgba(160, 198, 219, 0.42);
}

@layer components {
  .app-shell {
    @apply min-h-screen text-slate-800;
  }

  .shell-width {
    @apply mx-auto max-w-[1440px] px-6 md:px-10;
  }

  .page-kicker {
    @apply text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500;
  }

  .page-title {
    @apply text-2xl font-semibold tracking-[-0.04em] text-ink md:text-3xl;
  }

  .page-intro {
    @apply max-w-3xl text-sm leading-6 text-slate-600 md:text-[15px];
  }

  .app-nav-link {
    @apply border-b-2 border-transparent pb-2 text-sm font-medium text-brand-grey transition-colors hover:text-brand-navy focus-visible:outline-none focus-visible:text-brand-navy;
  }

  .app-nav-link-active {
    @apply border-brand-adriatic text-brand-navy;
  }

  .action-link {
    @apply rounded-sm text-sm font-semibold text-brand-adriatic underline decoration-brand-adriatic/30 underline-offset-4 transition hover:text-brand-navy hover:decoration-brand-navy/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-adriatic/20;
  }

  .surface-card {
    @apply rounded-xl border border-slate-300/80 bg-white;
  }

  .surface-subtle {
    @apply rounded-xl border border-slate-300/70 bg-[#fbfaf7];
  }

  .surface-open {
    @apply border-y border-slate-300/70 bg-transparent;
  }

  .section-heading {
    @apply flex flex-wrap items-end justify-between gap-3 border-b border-slate-300/70 pb-3;
  }

  .section-heading-title {
    @apply text-lg font-semibold tracking-[-0.03em] text-ink;
  }

  .section-heading-copy {
    @apply text-sm leading-6 text-slate-600;
  }

  .briefing-strip {
    @apply surface-card grid gap-4 overflow-hidden md:grid-cols-4;
  }

  .briefing-metric {
    @apply px-5 py-4;
  }

  .briefing-metric + .briefing-metric {
    @apply border-t border-slate-200/80 md:border-l md:border-t-0;
  }

  .briefing-label {
    @apply text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500;
  }

  .briefing-value {
    @apply mt-3 text-xl font-semibold tracking-[-0.03em] text-ink;
  }

  .briefing-meta {
    @apply mt-2 text-xs leading-5 text-slate-500;
  }

  .ledger-shell {
    @apply surface-card overflow-x-auto;
  }

  .ledger-table {
    @apply min-w-full border-collapse text-sm;
  }

  .ledger-table thead th {
    @apply border-b border-slate-300/80 bg-transparent px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500;
  }

  .ledger-table tbody td {
    @apply px-5 py-4 align-top text-sm text-slate-700;
  }

  .ledger-table tbody tr {
    @apply border-b border-slate-200/80;
  }

  .ledger-table tbody tr:last-child {
    @apply border-b-0;
  }

  .rail-list {
    @apply divide-y divide-slate-200/80;
  }

  .rail-row {
    @apply flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0;
  }

  .advisory-note {
    @apply rounded-xl border-l-4 border-amber-700 bg-amber-50/70 px-4 py-3;
  }

  .dossier-list {
    @apply surface-card divide-y divide-slate-200/80 overflow-hidden;
  }

  .dossier-row {
    @apply grid gap-5 px-5 py-5 md:grid-cols-[minmax(0,1fr)_220px];
  }

  .dossier-meta {
    @apply text-xs font-medium uppercase tracking-[0.16em] text-slate-500;
  }

  .dossier-title {
    @apply mt-2 text-lg font-semibold tracking-[-0.03em] text-ink;
  }

  .dossier-copy {
    @apply text-sm leading-6 text-slate-700;
  }

  .field-input {
    @apply rounded-xl border border-brand-grey/40 bg-white px-4 py-3 text-sm text-ink outline-none transition placeholder:text-slate-400 focus:border-brand-adriatic focus:ring-2 focus:ring-brand-adriatic/15;
  }

  .primary-button {
    @apply rounded-xl bg-brand-navy px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-adriatic focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-adriatic/25 disabled:cursor-not-allowed disabled:bg-slate-300;
  }

  .secondary-button {
    @apply rounded-xl border border-brand-grey/40 bg-white px-5 py-3 text-sm font-semibold text-brand-navy transition hover:border-brand-adriatic hover:bg-brand-light-blue/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-adriatic/20;
  }
}