WebForm-mw/app/globals.css

@import "tailwindcss";

/* ─────────────────────────────────────────────────────────────────────────
 * Theme — "Field Almanac"
 *
 * Inspiration: 1970s ecological-movement print, agricultural cooperative
 * publications, hand-bound field journals. Warm cream paper, deep
 * botanical green ink, sparing terracotta accent for emphasis.
 *
 * The palette is built in OKLCH for perceptual uniformity. Every neutral
 * is tinted toward the leaf hue (h≈130) so cream and green feel like they
 * came from the same press run.
 * ─────────────────────────────────────────────────────────────────────── */

@theme {
  /* Typography */
  --font-display: var(--font-display), ui-serif, Georgia, "Times New Roman", serif;
  --font-body: var(--font-body), ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Custom utility names */
  --color-paper: oklch(97.5% 0.012 95);          /* warm cream */
  --color-paper-2: oklch(95.5% 0.018 90);        /* deeper cream — section bands */
  --color-ink: oklch(20% 0.02 130);              /* near-black, slight green tint */
  --color-ink-soft: oklch(35% 0.018 130);
  --color-ink-mute: oklch(55% 0.014 120);
  --color-rule: oklch(82% 0.025 100);            /* hairline rules — like ink on cream */
  --color-rule-soft: oklch(89% 0.02 100);

  /* Botanical green — primary */
  --color-leaf-50: oklch(97% 0.025 135);
  --color-leaf-100: oklch(93% 0.05 135);
  --color-leaf-200: oklch(87% 0.085 135);
  --color-leaf-300: oklch(78% 0.115 135);
  --color-leaf-400: oklch(68% 0.13 135);
  --color-leaf-500: oklch(57% 0.135 135);
  --color-leaf-600: oklch(47% 0.13 135);
  --color-leaf-700: oklch(38% 0.115 135);
  --color-leaf-800: oklch(30% 0.09 135);
  --color-leaf-900: oklch(22% 0.06 135);

  /* Terracotta — accent. Used sparingly: current-stage marker, key CTAs. */
  --color-clay-100: oklch(94% 0.04 50);
  --color-clay-200: oklch(86% 0.075 50);
  --color-clay-400: oklch(70% 0.13 45);
  --color-clay-500: oklch(63% 0.15 42);
  --color-clay-600: oklch(54% 0.155 40);
  --color-clay-700: oklch(45% 0.135 38);

  /* Stone — kept as a familiar alias mapping to our warm neutrals so any
   * earlier `text-stone-*` / `border-stone-*` references stay readable. */
  --color-stone-50: var(--color-paper);
  --color-stone-100: var(--color-paper-2);
  --color-stone-200: var(--color-rule-soft);
  --color-stone-300: var(--color-rule);
  --color-stone-400: oklch(70% 0.018 110);
  --color-stone-500: var(--color-ink-mute);
  --color-stone-600: oklch(48% 0.015 120);
  --color-stone-700: var(--color-ink-soft);
  --color-stone-800: oklch(28% 0.018 130);
  --color-stone-900: var(--color-ink);
}

/* Base — paper texture and ink defaults */
:root {
  color-scheme: light;
}

html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  /* Subtle paper grain — two diagonal repeating linear gradients combined
   * with a soft radial overlay. No external image. Survives dark mode if
   * we ever add one. */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, oklch(99% 0.01 95 / 0.7), transparent 60%),
    repeating-linear-gradient(
      105deg,
      oklch(96% 0.02 95 / 0.4) 0,
      oklch(96% 0.02 95 / 0.4) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      15deg,
      oklch(94% 0.02 95 / 0.25) 0,
      oklch(94% 0.02 95 / 0.25) 1px,
      transparent 1px,
      transparent 9px
    );
}

/* Typography defaults */
.font-display { font-family: var(--font-display); font-feature-settings: "ss01", "cv01"; }
.font-body { font-family: var(--font-body); }

/* Long-form headings get optical-size tuning for richer letterforms */
h1.font-display, h2.font-display, h3.font-display {
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.015em;
}

/* Forms: shared input rhythm */
input, select, textarea, button {
  font: inherit;
}

/* A more deliberate focus ring — uses the leaf token */
*:focus-visible {
  outline: 2px solid var(--color-leaf-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Date input chevron styled to match */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  filter: hue-rotate(70deg);
}

/* Print: lay it out like a real field-journal page when a user hits Cmd+P */
@media print {
  body { background: white; color: black; }
  body { background-image: none; }
  details { display: block !important; }
  details > div[role="region"] { display: block !important; }
  .no-print { display: none !important; }
}

/* Reduced motion: defer to user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* A small cohort of utility classes — rule lines, rough underlines, etc. */
.rule-soft {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-rule) 12%,
    var(--color-rule) 88%,
    transparent 100%
  );
}

/* Ink-bloom focus — used on text inputs to feel handwritten */
.input-ink {
  background-image: linear-gradient(
    to top,
    var(--color-leaf-200) 0%,
    var(--color-leaf-200) 1px,
    transparent 1px,
    transparent 100%
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input-ink:focus {
  background-size: 100% 100%;
}