frontend/src/index.css

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap");

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

:root {
  color-scheme: light;
  --mt-font-sans: "Public Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mt-font-mono: "SFMono-Regular", "SF Mono", "IBM Plex Mono", "Menlo", "Consolas", monospace;
  --mt-body-size: 1.03125rem;
  --mt-body-line: 1.5;
  --mt-title-tracking: -0.022em;
  --mt-meta-tracking: 0.08em;
  --mt-primary: #173560;
  --mt-primary-hover: #112848;
  --mt-primary-soft: #ebf1f8;
  --mt-primary-border: #c8d6e8;
  --mt-surface: #f5f7fb;
  --mt-surface-muted: #eef3f8;
  --mt-surface-strong: #e4ebf2;
  --mt-card: #ffffff;
  --mt-border: #d8e0ea;
  --mt-border-strong: #c6d0dd;
  --mt-shadow-card: 0 18px 36px rgba(15, 23, 42, 0.06), 0 6px 14px rgba(15, 23, 42, 0.04);
  --mt-shadow-card-soft: 0 10px 24px rgba(15, 23, 42, 0.045), 0 3px 8px rgba(15, 23, 42, 0.03);
  --mt-inset-highlight: rgba(255, 255, 255, 0.7);
  --mt-text-strong: #0f172a;
  --mt-text-muted: #5f7086;
  --mt-success: #18794e;
  --mt-success-hover: #10623f;
  --mt-success-soft: #eaf7f0;
  --mt-success-border: #b8dec9;
  --mt-warning: #9a6700;
  --mt-warning-soft: #fff5e6;
  --mt-warning-border: #f1d29c;
  --mt-danger: #b42318;
  --mt-danger-soft: #fdeceb;
  --mt-danger-border: #f2b7b2;
  --mt-focus-ring: rgba(23, 53, 96, 0.22);
  --mt-radius-card: 20px;
  --mt-radius-surface: 16px;
  --mt-radius-control: 12px;
  --mt-radius-pill: 999px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--mt-font-sans);
  font-size: var(--mt-body-size);
  line-height: var(--mt-body-line);
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1200px 500px at 50% -180px, #ffffff 0%, transparent 70%),
    linear-gradient(180deg, #fbfcfe 0%, var(--mt-surface) 100%);
  color: var(--mt-text-strong);
}

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

::selection {
  background: rgba(23, 53, 96, 0.16);
}

@layer components {
  .mt-shell-card {
    background-color: var(--mt-card);
    border-radius: var(--mt-radius-card);
    box-shadow: var(--mt-shadow-card);
  }

  .mt-surface-inset {
    background-color: var(--mt-surface-muted);
    border-radius: var(--mt-radius-surface);
    box-shadow: inset 0 1px 0 var(--mt-inset-highlight);
  }

  .mt-surface-inset-strong {
    background-color: var(--mt-surface-strong);
    border-radius: var(--mt-radius-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  }

  .mt-surface-card {
    @apply bg-white;
    border-radius: var(--mt-radius-surface);
    box-shadow: var(--mt-shadow-card-soft);
  }

  .mt-focus {
    @apply focus-visible:outline-none;
  }

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

  .mt-button-primary {
    @apply mt-focus border px-4 py-2 text-[0.95rem] font-semibold text-white shadow-sm transition disabled:opacity-50;
    border-color: var(--mt-primary);
    background-color: var(--mt-primary);
    border-radius: var(--mt-radius-control);
    letter-spacing: -0.01em;
  }

  .mt-button-primary:hover:not(:disabled) {
    border-color: var(--mt-primary-hover);
    background-color: var(--mt-primary-hover);
  }

  .mt-button-soft {
    @apply mt-focus border px-4 py-2 text-[0.95rem] font-semibold shadow-sm transition disabled:opacity-50;
    border-color: var(--mt-border);
    background-color: var(--mt-surface-muted);
    border-radius: var(--mt-radius-control);
    color: var(--mt-text-strong);
    letter-spacing: -0.01em;
  }

  .mt-button-soft:hover:not(:disabled) {
    background-color: var(--mt-surface-strong);
  }

  .mt-button-chip {
    @apply mt-focus border px-3 py-1.5 text-[0.82rem] font-semibold shadow-sm transition disabled:opacity-50;
    border-color: var(--mt-border);
    background-color: var(--mt-card);
    border-radius: var(--mt-radius-pill);
    color: var(--mt-text-muted);
    letter-spacing: -0.01em;
  }

  .mt-button-chip:hover:not(:disabled) {
    background-color: var(--mt-surface-muted);
    color: var(--mt-text-strong);
  }

  .mt-button-success {
    @apply mt-focus border px-4 py-2 text-[0.95rem] font-semibold text-white shadow-sm transition disabled:opacity-50;
    border-color: var(--mt-success);
    background-color: var(--mt-success);
    border-radius: var(--mt-radius-control);
    letter-spacing: -0.01em;
  }

  .mt-button-success:hover:not(:disabled) {
    border-color: var(--mt-success-hover);
    background-color: var(--mt-success-hover);
  }

  .mt-badge {
    @apply inline-flex items-center border px-2.5 py-1 text-[0.73rem] font-semibold;
    border-radius: var(--mt-radius-pill);
    letter-spacing: 0.01em;
  }

  .mt-badge--slate {
    border-color: var(--mt-border);
    background-color: var(--mt-surface-muted);
    color: var(--mt-text-muted);
  }

  .mt-badge--blue {
    border-color: var(--mt-primary-border);
    background-color: var(--mt-primary-soft);
    color: var(--mt-primary);
  }

  .mt-badge--green {
    border-color: var(--mt-success-border);
    background-color: var(--mt-success-soft);
    color: var(--mt-success);
  }

  .mt-badge--amber {
    border-color: var(--mt-warning-border);
    background-color: var(--mt-warning-soft);
    color: var(--mt-warning);
  }

  .mt-badge--red {
    border-color: var(--mt-danger-border);
    background-color: var(--mt-danger-soft);
    color: var(--mt-danger);
  }

  .mt-pill {
    @apply p-4;
    background-color: var(--mt-surface-muted);
    border-radius: var(--mt-radius-surface);
    box-shadow: inset 0 1px 0 var(--mt-inset-highlight);
  }

  .mt-display-title {
    letter-spacing: var(--mt-title-tracking);
  }

  .mt-meta-label {
    font-size: 0.72rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: var(--mt-meta-tracking);
    text-transform: uppercase;
    color: var(--mt-text-muted);
  }

  .mt-section-label {
    font-size: 0.93rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--mt-text-strong);
  }

  .mt-section-subtle {
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mt-text-muted);
  }

  .mt-text-primary {
    color: var(--mt-primary);
  }

  .mt-text-success {
    color: var(--mt-success);
  }

  .mt-text-warning {
    color: var(--mt-warning);
  }

  .mt-text-danger {
    color: var(--mt-danger);
  }

  .mt-panel-primary {
    background-color: var(--mt-primary-soft);
    color: var(--mt-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .mt-panel-success {
    background-color: var(--mt-success-soft);
    color: var(--mt-success);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  }

  .mt-panel-warning {
    background-color: var(--mt-warning-soft);
    color: var(--mt-warning);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  }

  .mt-panel-danger {
    background-color: var(--mt-danger-soft);
    color: var(--mt-danger);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
}


/* Rapid Router: clear focus outlines for keyboard navigation */
.rapid-router :focus-visible {
  outline: 2px solid var(--mt-primary);
  outline-offset: 2px;
}