labre-web/src/styles/global.css

@import "tailwindcss";
@import "@fontsource-variable/jetbrains-mono";

@theme {
  /* MotherDuck-derived system (shadow/radius/type mechanics); identity colors are UABC's own */
  --color-cream: #f4efea;
  --color-frost: #ffffff;
  --color-chalk: #f8f8f7;
  --color-ice: #ebf9ff;

  --color-ink: #383838;
  --color-pencil: #a1a1a1;
  --color-graphite: #818181;

  /* UABC institutional green/gold — dark enough that primary needs white text, not charcoal */
  --color-primary: #00723F;
  --color-primary-hover: #005f34;
  --color-secondary: #DD971A;
  --color-secondary-hover: #c78614;
  --color-danger: #f38e84;
  --color-danger-hover: #ec7469;
  /* AA-contrast text variant of Coral Sketch — the fill color reads ~2:1 on white, too light for body text */
  --color-danger-text: #a83224;
  --color-positive: #38c1b0;
  --color-attention: #ffde00;

  --color-surface: var(--color-cream);

  --font-sans: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --radius-card: 2px;
  --shadow-hard: -6px 6px 0 0 var(--color-ink);
  --shadow-hard-sm: -3px 3px 0 0 var(--color-ink);

  /* Every Tailwind radius utility collapses to the system's 2px — non-negotiable per brief */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-2xl: 2px;
  --radius-3xl: 2px;
}

@layer base {
  html {
    color-scheme: light;
  }
  body {
    background: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
  }
  :focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }
  ::selection {
    background: var(--color-primary);
    color: white;
  }
  /* Tabular data keeps real square corners even where a nested control forgets to ask */
  table {
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-[2px] px-4 py-2.5 font-medium
           motion-safe:transition-transform motion-safe:duration-100 motion-safe:ease-out
           disabled:opacity-50 disabled:pointer-events-none disabled:translate-x-0 disabled:translate-y-0;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border: 2px solid var(--color-ink);
    color: var(--color-ink);
    box-shadow: var(--shadow-hard);
  }
  .btn:hover,
  .btn:focus-visible {
    transform: translate(-6px, 6px);
    box-shadow: 0 0 0 0 transparent;
  }
  .btn:active {
    transform: translate(-3px, 3px);
    box-shadow: var(--shadow-hard-sm);
  }
  .btn-primary {
    background: var(--color-primary);
    color: white;
  }
  .btn-secondary {
    background: var(--color-secondary);
    color: var(--color-ink);
  }
  .btn-ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: color-mix(in oklab, var(--color-ink) 35%, transparent);
    box-shadow: none;
  }
  .btn-ghost:hover,
  .btn-ghost:focus-visible {
    transform: none;
    background: var(--color-chalk);
    border-color: var(--color-ink);
  }

  .card {
    @apply rounded-[2px] bg-white p-6;
    border: 2px solid var(--color-ink);
  }
  .card-flat {
    @apply rounded-[2px] bg-white p-6;
    border: 1.5px solid var(--color-ink);
  }
  .card-raised {
    @apply rounded-[2px] bg-white p-6;
    border: 2px solid var(--color-ink);
    box-shadow: var(--shadow-hard);
  }
  .card-link {
    @apply rounded-[2px] bg-white p-6 block
           motion-safe:transition-transform motion-safe:duration-100 motion-safe:ease-out;
    border: 2px solid var(--color-ink);
    box-shadow: var(--shadow-hard);
  }
  .card-link:hover,
  .card-link:focus-visible {
    transform: translate(-6px, 6px);
    box-shadow: 0 0 0 0 transparent;
  }

  .input {
    @apply w-full rounded-[2px] bg-white px-3 py-2.5
           transition-[border-color] duration-100
           focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2
           focus-visible:outline-[color:var(--color-ink)];
    border: 2px solid var(--color-ink);
    min-height: 44px;
    touch-action: manipulation;
  }
  .input:focus {
    border-color: var(--color-primary);
  }
  .label {
    @apply block text-sm font-medium mb-1 uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    color: var(--color-ink);
  }

  .badge {
    @apply inline-flex items-center rounded-[2px] px-2 py-0.5 text-xs font-semibold uppercase whitespace-nowrap;
    letter-spacing: 0.03em;
    border: 1.5px solid var(--color-ink);
  }

  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
}