apps/web/src/app/globals.css

@import "tailwindcss";

/*
  ──────────────────────────────────────────────────────────────
  DESIGN LANGUAGE — quiet, soft, effortless.
  Hanken Grotesk only. Warm near-white canvas, layered neutral
  greys, one calm accent used sparingly. Gentle rounding, no
  heavy borders, no hard shadows. Space does the work.
  ──────────────────────────────────────────────────────────────
*/

@theme {
  /* Warm neutral surfaces — barely-there tint, layered by elevation */
  --color-canvas: oklch(0.985 0.002 90);
  --color-surface: oklch(1 0 0);
  --color-sunk: oklch(0.965 0.003 90);

  /* Ink scale — soft, never pure black */
  --color-ink: oklch(0.265 0.006 280);
  --color-ink-2: oklch(0.46 0.006 280);
  --color-ink-3: oklch(0.62 0.005 280);
  --color-ink-4: oklch(0.78 0.004 280);

  /* Hairlines / fills */
  --color-line: oklch(0.265 0.006 280 / 0.09);
  --color-line-2: oklch(0.265 0.006 280 / 0.16);
  --color-fill: oklch(0.265 0.006 280 / 0.04);

  /* One calm accent — muted iris, not loud */
  --color-accent: oklch(0.58 0.13 268);
  --color-accent-soft: oklch(0.58 0.13 268 / 0.1);
  --color-on-accent: oklch(0.99 0 0);

  --font-sans: var(--font-hanken), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-mono), ui-monospace, "SF Mono", monospace;

  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

@variant dark (&:where(.dark, .dark *));

:root.dark {
  --color-canvas: oklch(0.205 0.005 280);
  --color-surface: oklch(0.245 0.006 280);
  --color-sunk: oklch(0.185 0.005 280);
  --color-ink: oklch(0.95 0.003 280);
  --color-ink-2: oklch(0.74 0.004 280);
  --color-ink-3: oklch(0.58 0.005 280);
  --color-ink-4: oklch(0.44 0.005 280);
  --color-line: oklch(0.95 0.003 280 / 0.1);
  --color-line-2: oklch(0.95 0.003 280 / 0.18);
  --color-fill: oklch(0.95 0.003 280 / 0.05);
  --color-accent: oklch(0.68 0.14 268);
  --color-accent-soft: oklch(0.68 0.14 268 / 0.16);
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    letter-spacing: -0.011em;
  }

  ::selection {
    background-color: var(--color-accent-soft);
  }

  /* Calm focus ring */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  ::placeholder {
    color: var(--color-ink-4);
  }

  /* Custom scrollbar — thin, rounded, themed to the ink scale. Firefox. */
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-2) transparent;
  }

  /* WebKit (Chrome / Safari / Edge) */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-line-2);
    border-radius: 999px;
    /* inset the thumb so it reads as a thin pill, not a full-width bar */
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s var(--ease-soft);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-ink-4);
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: var(--color-ink-3);
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

@layer components {
  /* Mono micro-label */
  .tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--color-ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* A surface card — the core building block */
  .card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
  }

  /* Text input — used in the admin forms */
  .input {
    width: 100%;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-sm, 0.5rem);
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    outline: none;
  }
  .input:focus {
    border-color: var(--color-accent);
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .nums {
    font-variant-numeric: tabular-nums;
  }
}