/*
 * Catchment shared design tokens — canonical source of truth.
 *
 * Extracted from the marketing site's live stylesheet (assets/css/style.css,
 * the one actually linked from index.html — NOT updated_style.css or
 * test.css, which are unused leftovers in this same folder).
 *
 * WHO CONSUMES THIS FILE
 * This file defines color/spacing/radius/shadow values as plain CSS custom
 * properties on :root, with no framework dependency, so it can be linked or
 * imported as-is from any of:
 *   - Next.js / Tailwind 4 (catchment_portal): `@import` this file at the top
 *     of globals.css, ahead of the existing `@theme inline { ... }` block.
 *     Tailwind 4's @theme inline already reads values via var(--...), which
 *     is exactly what this file provides — no other change needed there.
 *   - Vite/React (catchment_modalyzer/frontend): `@import` this file at the
 *     top of src/index.css, replacing that file's own hand-duplicated
 *     :root block (keep its @font-face rules — see FONTS note below).
 *   - Django/Bulma (catchment_catchy): link this file as a static asset in
 *     base.html, after bulma.min.css so these overrides win, then reference
 *     the variables from a small custom stylesheet (main.css) the same way
 *     the other two apps do.
 *
 * FONTS
 * Only font-family *names* are shared here (--font-*). The actual @font-face
 * declarations are NOT in this file, because each app serves its font files
 * from its own static/public directory (Next.js public/, Vite public/,
 * Django static/) — there's no shared CDN or build step across these three
 * separately-deployed repos today. Each consuming app must declare
 * @font-face rules for exactly these family name strings, pointing at its
 * own local copy of the font files. Canonical font files live at
 * catchment/www/assets/fonts/ — copy from there:
 *   Futura Light.ttf / FuturaLT-Light.woff
 *   Gratimo-Classic-Regular.{ttf,woff,woff2}
 *   Gratimo-Classic-Bold.{ttf,woff,woff2}
 *   Grato-Classic-Black.{ttf,woff,woff2}
 *
 * Note on the site's own usage: the live site's `body` selector actually
 * sets "gratimo classic bold" as the base font (not Regular), and declares
 * "futura light" via @font-face but never applies it anywhere — effectively
 * a dead face on the real site today. The hierarchy below follows what
 * catchment_portal already shipped in the July session (Regular for body
 * copy, Bold/Black for headings, Light reserved for eyebrows/labels), which
 * reads better for application UI than bolding all body text — flagged here
 * as a deliberate deviation from the site's literal CSS, not an oversight.
 *
 * LOGO USAGE RULE
 * Two marks exist — use the right one, never interchange them:
 *   - WORDMARK — CATCHMENT_Logo_2023_RGB.png (source: catchment/www/assets/
 *     img/Catchy/), 1165x171. Use in nav bars / page headers wherever there
 *     is enough horizontal room. catchment_modalyzer/frontend already does
 *     this correctly (public/catchment-logo.png, used in Header.tsx).
 *   - ICON-ONLY MARK — CATCHY_Icon_2023_RGB.png, 725x725 (square). Use ONLY
 *     for favicons and compact spaces (mobile nav collapsed state, avatar-
 *     sized slots) — never as a substitute for the wordmark in a header
 *     that has room for one. The marketing site currently violates this
 *     (uses the icon-only mark in its own header, in place of the wordmark,
 *     which is presently unused anywhere) — worth fixing there too, not
 *     just in the services being unified now.
 *   - Favicon: use a square-cropped derivative of the icon-only mark
 *     (CATCHY_favicon.png / catchment_modalyzer/frontend/public/favicon.png
 *     are both already-correct examples), not the wordmark.
 */

:root {
  /* ---- Brand colors (from style.css hex frequency; #005e5e/#49e38c are
     the two dominant, defining colors — everything else is secondary) ---- */
  --color-primary: #005e5e;        /* brand teal — nav text, primary actions, links */
  --color-primary-hover: #004848;  /* darker teal — hover/active state */
  --color-primary-foreground: #ffffff;

  --color-accent-strong: #49e38c;  /* brightest green — hero headlines, button hover bg */
  --color-accent: #18d26e;         /* mid green — success states, badges */
  --color-accent-soft: #5ab652;    /* muted green — alt accent, less common */

  --color-danger: #ed3c0d;         /* errors/warnings ONLY — used once on the whole
                                       site; do not use decoratively */

  --color-offwhite: #ebebe1;       /* the site's warm off-white — hero subtext,
                                       button text on teal, section backgrounds */

  /* ---- Neutral/surface scale ----
     The marketing site is a single-page site and doesn't define app-dashboard
     surfaces (cards, panels, muted text) — these are converged from what
     catchment_portal and catchment_modalyzer/frontend independently already
     built and validated in production use, not invented fresh here. */
  --color-bg: #ffffff;
  --color-surface: #f2f7f6;        /* tinted section/dashboard bg, from the
                                       Modalyzer frontend — distinguishes page
                                       bg from white panels/cards on top of it */
  --color-panel: #ffffff;
  --color-border: #d8d8d8;
  --color-text: #0f2e2e;           /* dark teal-black, from the Modalyzer
                                       frontend — reads as branded, not generic
                                       black */
  --color-muted: #5c7975;

  /* ---- Dark mode ----
     Brand teal fails contrast on a near-black background, so dark mode
     promotes the bright brand green to primary (mirrors the site's own
     teal -> green hover convention). Already validated in catchment_portal. */
  --color-bg-dark: #151515;
  --color-surface-dark: #2f2f2f;
  --color-border-dark: #484848;
  --color-text-dark: #ebebe1;
  --color-muted-dark: #bababa;
  --color-primary-dark: #49e38c;
  --color-primary-hover-dark: #18d26e;
  --color-primary-foreground-dark: #151515;

  /* ---- Fonts (see FONTS note above — names only) ---- */
  --font-body: "Gratimo Classic Regular", sans-serif;
  --font-heading: "Grato Classic Black", sans-serif;      /* h1, hero titles */
  --font-heading-alt: "Gratimo Classic Bold", sans-serif; /* h3-h6, nav emphasis */
  --font-light: "Futura Light", sans-serif;                /* eyebrows/labels only */

  /* ---- Radius scale ----
     3px/4px/6-8px are the site's actual card/button radii; 50px/999px are
     its pill-button and circular-badge radii (999px form already used by
     the Modalyzer frontend's mode-selector buttons). */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Shadow scale ----
     shadow-md is the site's single most-repeated card shadow value
     (appears 4x in style.css) — use it for card-style surfaces to match the
     marketing site directly. shadow-sm is lighter, from the Modalyzer
     frontend's dense data panels, where a heavier shadow reads as too busy. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0px 2px 15px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 4px 10px -3px rgba(191, 191, 191, 0.5);

  /* ---- Spacing scale ----
     A modest rem scale matching what's already in use across the site and
     both existing apps — not a full custom system, just shared names for
     the handful of sizes that already recur everywhere. */
  --space-xs: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1.2rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-border: var(--color-border-dark);
    --color-text: var(--color-text-dark);
    --color-muted: var(--color-muted-dark);
    --color-primary: var(--color-primary-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-primary-foreground: var(--color-primary-foreground-dark);
  }
}