WebForm-mw/app/globals.css

@import "tailwindcss";

/* ─────────────────────────────────────────────────────────────────────────
 * Theme — FCI Brand
 *
 * Aligned with the Food Co-op Initiative brand guidelines (12.2022).
 * Primary palette: Eggplant (#801d7f), Spring Pea (#96bc33), Squash
 * (#c9ad2d). Secondary neutrals: FCI Dark Gray (#4b5657), FCI Beige
 * (#D2C9B0), Seed Grant Green (#679038). Type: Open Sans (FCI's free
 * substitute for Museo Sans, per the guidelines).
 *
 * Semantic token names from the previous theme are preserved so existing
 * component class names continue to apply:
 *   - leaf-*  → Spring Pea / Seed Grant green family
 *   - clay-*  → Eggplant purple family (brand primary accent)
 *   - squash-*→ FCI yellow accent (new)
 *   - paper/ink → clean neutrals tuned to brand gray
 * ─────────────────────────────────────────────────────────────────────── */

@theme {
  /* Typography
   *   Headings: existing display serif (Fraunces) retained for editorial voice.
   *   Body:     Open Sans — FCI brand's free fallback for Museo Sans. */
  --font-display: var(--font-display), ui-serif, Georgia, "Times New Roman", serif;
  --font-body: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Neutrals — anchored on FCI Dark Gray #4b5657 with FCI Beige #D2C9B0
   * peeking through in tinted surfaces. */
  --color-paper: #ffffff;                /* clean white */
  --color-paper-2: #f7f4ec;              /* tinted band — FCI beige, very light */
  --color-ink: #2d3536;                  /* near-black, brand-aligned */
  --color-ink-soft: #4b5657;             /* FCI Dark Gray (exact) */
  --color-ink-mute: #7a8384;
  --color-rule: #d7d3c7;                 /* FCI beige, desaturated */
  --color-rule-soft: #ebe7dc;

  /* Leaf — Spring Pea #96bc33 + Seed Grant #679038 (FCI brand greens). */
  --color-leaf-50: #f3f8e8;
  --color-leaf-100: #e6f2cd;
  --color-leaf-200: #d0e5a6;
  --color-leaf-300: #b8d97c;
  --color-leaf-400: #a4cf57;
  --color-leaf-500: #96bc33;             /* FCI Spring Pea (exact) */
  --color-leaf-600: #7faa2a;
  --color-leaf-700: #679038;             /* FCI Seed Grant (exact) */
  --color-leaf-800: #4f7029;
  --color-leaf-900: #344f1a;

  /* Clay — repurposed as FCI Eggplant #801d7f (brand primary accent). */
  --color-clay-100: #f5e6f4;
  --color-clay-200: #e3c1e1;
  --color-clay-400: #b34db1;
  --color-clay-500: #9f2d9d;
  --color-clay-600: #801d7f;             /* FCI Eggplant (exact) */
  --color-clay-700: #6a1869;

  /* Squash — FCI yellow #c9ad2d. Reserved for warning glyphs and small
   * highlights; not currently consumed by components but available. */
  --color-squash-100: #faf3d0;
  --color-squash-300: #e6d066;
  --color-squash-500: #c9ad2d;           /* FCI Squash (exact) */
  --color-squash-700: #9a8623;

  /* Stone alias — mapped to FCI neutrals for any lingering text-stone-* refs. */
  --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: #a8aeae;
  --color-stone-500: var(--color-ink-mute);
  --color-stone-600: #5e6868;
  --color-stone-700: var(--color-ink-soft);
  --color-stone-800: #353c3d;
  --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);
}

/* Typography defaults. Display serif keeps optical-size tuning (Fraunces);
 * body switches to Open Sans (FCI brand fallback for Museo Sans). */
.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;
}

/* Anchor defaults. Body links (in copy and chrome) read as interactive
 * affordances: FCI leaf color + a 1px underline with a small offset.
 * Lives in @layer base so Tailwind utility classes (text-*, no-underline)
 * still win on elements that opt out individually. */
@layer base {
  a[href] {
    color: var(--color-leaf-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
  }
  a[href]:hover {
    color: var(--color-leaf-800);
    text-decoration-thickness: 1.5px;
  }
}

/* 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;
  }
}

/* Journey rail — gentle "you are here" pulse on the current stage marker.
 * Animates the ring shadow only; the marker disc stays at full opacity so
 * the cue reads as a halo rather than a fade. Reduced-motion users get the
 * static state thanks to the global override above. */
@keyframes rail-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 oklch(72% 0.14 135 / 0.55);
  }
  60% {
    box-shadow: 0 0 0 6px oklch(72% 0.14 135 / 0);
  }
}

/* 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%;
}