/* ==========================================================================
 * Kulima Design Tokens — Phase 18 foundation
 * --------------------------------------------------------------------------
 * AgroDB / Kulima FMIS — multi-tenant farm management for Uganda's agriculture.
 *
 * Anchor (stated before values, per Chwezi design doctrine §2.1):
 *   The palette is derived from Ugandan agriculture, not a vibe word — the deep
 *   green of matooke/banana and tea leaves (primary), warm soil/earth brown
 *   (secondary), and a maize/harvest amber (warning). It deliberately rejects
 *   the AI-slop indigo/purple-to-blue gradient and the stock Tailwind palette.
 *
 * Authoring model: three-tier tokens (primitive -> semantic -> component-ish
 * helpers in kulima-theme.css). Colour primitives are authored in OKLCH
 * (CSS Color 4, native in evergreen browsers) with a hex fallback on the same
 * token for older engines, email, and low-end-device browsers. Lightness is
 * perceptual, so ramp steps are actually even and the dark remap is a
 * controlled L/C move, not an eyeballed inversion.
 *
 * These tokens LAYER ON TOP of the existing Bootstrap/APEX theme. They do not
 * restyle existing pages; they give new work (and the thin helpers in
 * kulima-theme.css) one named, documented source of truth instead of ad-hoc
 * hexes scattered through templates (replaces F-UI-001/002 drift).
 *
 * WCAG 2.2: every sanctioned text-on-surface pairing is authored to clear the
 * AA floors — body/small text >= 4.5:1, large text (>=24px, or >=18.66px bold)
 * and meaningful UI/focus >= 3:1 — in BOTH the light and dark themes. The hex
 * values used for the contrast check are recorded in
 * docs/design/kulima-design-system.md. This file is a static token layer; the
 * contrast figures there are computed from the hex fallbacks, not from a
 * rendered-browser measurement.
 *
 * Naming convention (held throughout): --kulima-<category>-<role>[-<variant>].
 * A reader can tell a primitive (e.g. --kulima-green-600) from a semantic role
 * (e.g. --kulima-color-primary) by the name alone. Components reference the
 * semantic roles, never the primitives.
 * ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
   * TIER 1 — PRIMITIVE RAMPS (raw, context-free values; do not use directly
   * in components — reference the semantic roles below instead).
   * OKLCH authored; hex fallback in the comment for the design doc + legacy.
   * -------------------------------------------------------------------- */

  /* Green — matooke / tea leaf (brand primary hue ~ 150) */
  --kulima-green-50:  oklch(0.9674 0.0132 152.60);   /* #eef7f0 */
  --kulima-green-100: oklch(0.9222 0.0326 152.43);   /* #d6ecdb */
  --kulima-green-200: oklch(0.8521 0.0631 152.75);   /* #b0dbbb */
  --kulima-green-300: oklch(0.7663 0.0953 152.77);   /* #83c596 */
  --kulima-green-400: oklch(0.6677 0.1235 152.05);   /* #52aa6e */
  --kulima-green-500: oklch(0.5728 0.1280 151.53);   /* #2f8d50 */
  --kulima-green-600: oklch(0.4929 0.1131 152.36);   /* #1f7340 */ /* brand anchor */
  --kulima-green-700: oklch(0.4217 0.0953 152.67);   /* #185c33 */
  --kulima-green-800: oklch(0.3579 0.0789 152.06);   /* #144827 */
  --kulima-green-900: oklch(0.2885 0.0572 153.22);   /* #10331d */

  /* Earth — soil / clay brown (secondary hue ~ 60) */
  --kulima-earth-50:  oklch(0.9601 0.0108 76.60);    /* #f6f1ea */
  --kulima-earth-100: oklch(0.9037 0.0297 75.67);    /* #ebddca */
  --kulima-earth-200: oklch(0.8113 0.0578 76.47);    /* #d7bd98 */
  --kulima-earth-300: oklch(0.7015 0.0794 71.73);    /* #be9767 */
  --kulima-earth-400: oklch(0.5962 0.0893 72.06);    /* #a0763f */
  --kulima-earth-500: oklch(0.5128 0.0827 70.30);    /* #855e2d */
  --kulima-earth-600: oklch(0.4395 0.0729 67.45);    /* #6d4a22 */
  --kulima-earth-700: oklch(0.3737 0.0601 66.88);    /* #563a1b */
  --kulima-earth-800: oklch(0.3125 0.0474 67.06);    /* #412c15 */
  --kulima-earth-900: oklch(0.2589 0.0375 66.53);    /* #30200f */

  /* Amber — maize / harvest (warning hue ~ 75) */
  --kulima-amber-50:  oklch(0.9683 0.0264 87.85);    /* #fcf4e1 */
  --kulima-amber-100: oklch(0.9327 0.0645 87.67);    /* #fbe7b8 */
  --kulima-amber-300: oklch(0.8321 0.1327 85.37);    /* #efc158 */
  --kulima-amber-500: oklch(0.7269 0.1437 78.54);    /* #d79a1f */
  --kulima-amber-700: oklch(0.5326 0.1095 77.79);    /* #8f6305 */
  --kulima-amber-900: oklch(0.3989 0.0829 78.97);    /* #5f4100 */

  /* Status — success reuses green; danger (clay-red ~ 27); info (sky teal ~ 230) */
  --kulima-red-100: oklch(0.9161 0.0319 29.76);      /* #f8dcd7 */
  --kulima-red-500: oklch(0.5433 0.1740 29.70);      /* #c0392b */
  --kulima-red-600: oklch(0.4792 0.1614 29.75);      /* #a52a1e */
  --kulima-red-700: oklch(0.4220 0.1402 30.02);      /* #8a2318 */

  --kulima-blue-100: oklch(0.9216 0.0235 235.99);    /* #d7e8f3 */
  --kulima-blue-500: oklch(0.5541 0.1021 239.49);    /* #2f7aa8 */
  --kulima-blue-700: oklch(0.4332 0.0784 239.21);    /* #205677 */

  /* Neutrals — NOT pure grey: low-chroma ramp carrying the brand green hue so
   * surfaces feel warm/agricultural, not clinical. Never #000 / #fff. */
  --kulima-neutral-0:   oklch(0.9930 0.0017 145.56); /* #fcfdfc  near-white surface */
  --kulima-neutral-50:  oklch(0.9760 0.0051 145.54); /* #f5f8f5 */
  --kulima-neutral-100: oklch(0.9442 0.0075 151.89); /* #e9eeea */
  --kulima-neutral-200: oklch(0.8958 0.0118 153.65); /* #d7dfd9 */
  --kulima-neutral-300: oklch(0.8168 0.0146 155.52); /* #bcc6bf  borders */
  --kulima-neutral-400: oklch(0.6916 0.0215 154.70); /* #92a096  muted on dark */
  --kulima-neutral-500: oklch(0.5754 0.0214 157.48); /* #6f7d74  muted text */
  --kulima-neutral-600: oklch(0.4862 0.0216 150.20); /* #576359 */
  --kulima-neutral-700: oklch(0.3986 0.0165 152.15); /* #414a43 */
  --kulima-neutral-800: oklch(0.3166 0.0130 154.51); /* #2d342f */
  --kulima-neutral-900: oklch(0.2486 0.0115 156.29); /* #1d231f  near-black text */
  --kulima-neutral-950: oklch(0.2110 0.0108 151.21); /* #151a16  dark surface base */

  /* ----------------------------------------------------------------------
   * TIER 2 — SEMANTIC COLOUR ROLES (the theming seam — this is the only tier
   * a theme re-points; components reference these, never the primitives above).
   * Light theme bindings.
   * -------------------------------------------------------------------- */
  --kulima-color-primary:        var(--kulima-green-600);
  --kulima-color-primary-hover:  var(--kulima-green-700);
  --kulima-color-primary-subtle: var(--kulima-green-100);
  --kulima-color-on-primary:     var(--kulima-neutral-0);   /* text/icon ON primary */

  --kulima-color-secondary:        var(--kulima-earth-600);
  --kulima-color-secondary-hover:  var(--kulima-earth-700);
  --kulima-color-secondary-subtle: var(--kulima-earth-100);
  --kulima-color-on-secondary:     var(--kulima-neutral-0);

  --kulima-color-success:        var(--kulima-green-600);
  --kulima-color-success-subtle: var(--kulima-green-100);
  --kulima-color-on-success:     var(--kulima-neutral-0);

  --kulima-color-warning:        var(--kulima-amber-700);   /* dark-enough amber for text contrast */
  --kulima-color-warning-subtle: var(--kulima-amber-100);
  --kulima-color-on-warning:     var(--kulima-neutral-0);

  --kulima-color-danger:         var(--kulima-red-600);
  --kulima-color-danger-subtle:  var(--kulima-red-100);
  --kulima-color-on-danger:      var(--kulima-neutral-0);

  --kulima-color-info:           var(--kulima-blue-700);
  --kulima-color-info-subtle:    var(--kulima-blue-100);
  --kulima-color-on-info:        var(--kulima-neutral-0);

  /* Surfaces & text */
  --kulima-color-surface:        var(--kulima-neutral-0);   /* page/card background */
  --kulima-color-surface-raised: var(--kulima-neutral-50);  /* elevated card/panel */
  --kulima-color-surface-sunken: var(--kulima-neutral-100); /* wells, table stripes */
  --kulima-color-text:           var(--kulima-neutral-900); /* primary body text (not #000) */
  --kulima-color-text-muted:     var(--kulima-neutral-600); /* secondary/help text: #576359, 6.1:1 on surface (Phase 20: neutral-500 measured 4.24:1, below AA) */
  --kulima-color-muted:          var(--kulima-neutral-600); /* alias of text-muted */
  --kulima-color-border:         var(--kulima-neutral-300); /* default divider/border */
  --kulima-color-border-strong:  var(--kulima-neutral-400);
  --kulima-color-link:           var(--kulima-green-700);
  --kulima-color-link-hover:     var(--kulima-green-800);

  /* Focus ring — >=3:1 against adjacent colours in both themes */
  --kulima-color-focus:          var(--kulima-green-500);

  /* ----------------------------------------------------------------------
   * TYPOGRAPHY
   * Typeface decision (stated before values, per doctrine): a friendly-humanist
   * pairing fit for a civic/agriculture service UI used on low-end devices and
   * in the field — Hanken Grotesk for headings, Atkinson Hyperlegible for body
   * (Atkinson is purpose-built for maximum legibility in poor conditions). The
   * foundation ships the DEVICE-COMMON, non-slop fallback stacks below so no
   * network webfont is required by default (bandwidth matters in rural Uganda);
   * when a webfont is adopted, drop "Hanken Grotesk" / "Atkinson Hyperlegible"
   * in front of the respective stack and self-host woff2 — see the design doc.
   * The stacks deliberately avoid the banned AI-slop faces (Inter, Geist,
   * Roboto as a primary, Poppins, etc.); Roboto/Segoe only appear as system
   * fallback links inside an authored chain.
   * -------------------------------------------------------------------- */
  --kulima-font-heading: "Hanken Grotesk", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --kulima-font-body:    "Atkinson Hyperlegible", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --kulima-font-mono:    "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  /* Fluid type scale — major third (~1.25), clamp(min, fluid, max).
   * Base body = 16px (never below 12px). Steps have obvious jumps. */
  --kulima-font-size-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.80rem);  /* ~12-13px captions */
  --kulima-font-size-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* ~14-15px */
  --kulima-font-size-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);   /* ~16-17px body */
  --kulima-font-size-md:   clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); /* ~18-20px lead */
  --kulima-font-size-lg:   clamp(1.375rem, 1.28rem + 0.48vw, 1.625rem);/* ~22-26px h4/h3 */
  --kulima-font-size-xl:   clamp(1.75rem, 1.56rem + 0.95vw, 2.25rem);  /* ~28-36px h2 */
  --kulima-font-size-2xl:  clamp(2.25rem, 1.90rem + 1.75vw, 3rem);     /* ~36-48px h1 */
  --kulima-font-size-3xl:  clamp(2.75rem, 2.10rem + 3.25vw, 4rem);     /* ~44-64px hero */

  /* Line heights — inverse to size (x1.6 small, tighter for display) */
  --kulima-line-height-tight:   1.15; /* display / hero */
  --kulima-line-height-heading: 1.25; /* headings */
  --kulima-line-height-snug:    1.4;  /* lead / UI */
  --kulima-line-height-body:    1.6;  /* body copy */

  /* Weights — use extremes for contrast (not 400 vs 600) */
  --kulima-font-weight-light:    300;
  --kulima-font-weight-regular:  400;
  --kulima-font-weight-medium:   500;
  --kulima-font-weight-semibold: 600;
  --kulima-font-weight-bold:     700;
  --kulima-font-weight-black:    800;

  /* Letter-spacing */
  --kulima-tracking-heading: -0.01em; /* confident headings, slightly tight */
  --kulima-tracking-body:     0;
  --kulima-tracking-label:    0.06em; /* short uppercase labels only */

  /* ----------------------------------------------------------------------
   * SPACING — 8pt grid (base unit = 8px; step 1 is a 4px half-step for tight UI)
   * -------------------------------------------------------------------- */
  --kulima-space-0: 0;
  --kulima-space-1: 0.25rem; /* 4px  — hairline gaps */
  --kulima-space-2: 0.5rem;  /* 8px  — base unit */
  --kulima-space-3: 0.75rem; /* 12px */
  --kulima-space-4: 1rem;    /* 16px */
  --kulima-space-5: 1.5rem;  /* 24px */
  --kulima-space-6: 2rem;    /* 32px */
  --kulima-space-7: 3rem;    /* 48px */
  --kulima-space-8: 4rem;    /* 64px — section rhythm */

  /* ----------------------------------------------------------------------
   * RADII
   * -------------------------------------------------------------------- */
  --kulima-radius-none: 0;
  --kulima-radius-sm:   0.25rem; /* 4px  — inputs, badges */
  --kulima-radius-md:   0.5rem;  /* 8px  — buttons, cards */
  --kulima-radius-lg:   0.75rem; /* 12px — panels */
  --kulima-radius-xl:   1rem;    /* 16px — modals, hero */
  --kulima-radius-pill: 999px;   /* pills, avatars */

  /* ----------------------------------------------------------------------
   * SHADOWS / ELEVATION — low-chroma, warm; remap in dark (see below)
   * -------------------------------------------------------------------- */
  --kulima-shadow-xs: 0 1px 2px rgba(29, 35, 31, 0.08);
  --kulima-shadow-sm: 0 1px 3px rgba(29, 35, 31, 0.10), 0 1px 2px rgba(29, 35, 31, 0.06);
  --kulima-shadow-md: 0 4px 10px rgba(29, 35, 31, 0.10), 0 2px 4px rgba(29, 35, 31, 0.06);
  --kulima-shadow-lg: 0 10px 24px rgba(29, 35, 31, 0.12), 0 4px 8px rgba(29, 35, 31, 0.06);
  --kulima-shadow-focus: 0 0 0 3px var(--kulima-color-primary-subtle);

  /* ----------------------------------------------------------------------
   * Z-INDEX — one named scale (prevents z-index wars with Bootstrap defaults;
   * aligned above Bootstrap's 1000+ band so Kulima overlays sit intentionally)
   * -------------------------------------------------------------------- */
  --kulima-z-base:     1;
  --kulima-z-dropdown: 1100;
  --kulima-z-sticky:   1120;
  --kulima-z-overlay:  1150;
  --kulima-z-modal:    1200;
  --kulima-z-toast:    1300;
  --kulima-z-tooltip:  1400;

  /* ----------------------------------------------------------------------
   * BREAKPOINTS — documentation tokens (mobile-first). CSS @media cannot read
   * custom properties in the query itself; these record the contract and can
   * feed JS / container-query logic. Values align with Bootstrap 5.
   * -------------------------------------------------------------------- */
  --kulima-breakpoint-sm: 576px;
  --kulima-breakpoint-md: 768px;
  --kulima-breakpoint-lg: 992px;
  --kulima-breakpoint-xl: 1200px;
  --kulima-breakpoint-2xl: 1400px;

  /* ----------------------------------------------------------------------
   * TOUCH TARGETS — field use on phones/tablets. Apple HIG 44pt, Material 48dp.
   * -------------------------------------------------------------------- */
  --kulima-touch-target-min:    44px; /* absolute minimum (Apple HIG) */
  --kulima-touch-target-comfy:  48px; /* preferred for field use (Material) */

  /* Motion (respect reduced-motion in the theme layer) */
  --kulima-motion-fast:   120ms;
  --kulima-motion-base:   200ms;
  --kulima-motion-slow:   320ms;
  --kulima-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
 * DARK THEME — a deliberate semantic RE-POINT, never a lightness inversion.
 * Only the semantic (Tier 2) roles change; every primitive, type, space,
 * radius and z-index token above is inherited unchanged. Dark surfaces use a
 * near-dark green-tinted grey (not #000); accents LIGHTEN and slightly
 * desaturate to hold >=4.5:1 / 3:1. Opt in with <html data-theme="dark"> (or
 * on any ancestor). Contrast re-checked independently for dark — see the doc.
 * ========================================================================== */
[data-theme="dark"] {
  --kulima-color-primary:        var(--kulima-green-400);
  --kulima-color-primary-hover:  var(--kulima-green-300);
  --kulima-color-primary-subtle: var(--kulima-green-900);
  --kulima-color-on-primary:     var(--kulima-neutral-950); /* dark text on lightened accent */

  --kulima-color-secondary:        var(--kulima-earth-300);
  --kulima-color-secondary-hover:  var(--kulima-earth-200);
  --kulima-color-secondary-subtle: var(--kulima-earth-900);
  --kulima-color-on-secondary:     var(--kulima-neutral-950);

  --kulima-color-success:        var(--kulima-green-400);
  --kulima-color-success-subtle: var(--kulima-green-900);
  --kulima-color-on-success:     var(--kulima-neutral-950);

  --kulima-color-warning:        var(--kulima-amber-300);
  --kulima-color-warning-subtle: var(--kulima-amber-900);
  --kulima-color-on-warning:     var(--kulima-neutral-950);

  --kulima-color-danger:         var(--kulima-red-500);
  --kulima-color-danger-subtle:  var(--kulima-red-700);
  --kulima-color-on-danger:      var(--kulima-neutral-0);

  --kulima-color-info:           var(--kulima-blue-500);
  --kulima-color-info-subtle:    var(--kulima-blue-700);
  --kulima-color-on-info:        var(--kulima-neutral-0);

  --kulima-color-surface:        var(--kulima-neutral-950); /* base dark surface */
  --kulima-color-surface-raised: var(--kulima-neutral-800); /* elevation = lighter */
  --kulima-color-surface-sunken: var(--kulima-neutral-900);
  --kulima-color-text:           var(--kulima-neutral-50);
  --kulima-color-text-muted:     var(--kulima-neutral-400);
  --kulima-color-muted:          var(--kulima-neutral-400);
  --kulima-color-border:         var(--kulima-neutral-700);
  --kulima-color-border-strong:  var(--kulima-neutral-600);
  --kulima-color-link:           var(--kulima-green-300);
  --kulima-color-link-hover:     var(--kulima-green-200);
  --kulima-color-focus:          var(--kulima-green-400);

  --kulima-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --kulima-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --kulima-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.40);
  --kulima-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.45);
  --kulima-shadow-focus: 0 0 0 3px var(--kulima-color-primary-subtle);
}

/* Optional: follow OS preference when no explicit data-theme is set.
 * Scoped to :root so an explicit [data-theme] attribute always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --kulima-color-primary:        var(--kulima-green-400);
    --kulima-color-primary-hover:  var(--kulima-green-300);
    --kulima-color-primary-subtle: var(--kulima-green-900);
    --kulima-color-on-primary:     var(--kulima-neutral-950);
    --kulima-color-secondary:        var(--kulima-earth-300);
    --kulima-color-secondary-hover:  var(--kulima-earth-200);
    --kulima-color-secondary-subtle: var(--kulima-earth-900);
    --kulima-color-on-secondary:     var(--kulima-neutral-950);
    --kulima-color-success:        var(--kulima-green-400);
    --kulima-color-success-subtle: var(--kulima-green-900);
    --kulima-color-on-success:     var(--kulima-neutral-950);
    --kulima-color-warning:        var(--kulima-amber-300);
    --kulima-color-warning-subtle: var(--kulima-amber-900);
    --kulima-color-on-warning:     var(--kulima-neutral-950);
    --kulima-color-danger:         var(--kulima-red-500);
    --kulima-color-danger-subtle:  var(--kulima-red-700);
    --kulima-color-on-danger:      var(--kulima-neutral-0);
    --kulima-color-info:           var(--kulima-blue-500);
    --kulima-color-info-subtle:    var(--kulima-blue-700);
    --kulima-color-on-info:        var(--kulima-neutral-0);
    --kulima-color-surface:        var(--kulima-neutral-950);
    --kulima-color-surface-raised: var(--kulima-neutral-800);
    --kulima-color-surface-sunken: var(--kulima-neutral-900);
    --kulima-color-text:           var(--kulima-neutral-50);
    --kulima-color-text-muted:     var(--kulima-neutral-400);
    --kulima-color-muted:          var(--kulima-neutral-400);
    --kulima-color-border:         var(--kulima-neutral-700);
    --kulima-color-border-strong:  var(--kulima-neutral-600);
    --kulima-color-link:           var(--kulima-green-300);
    --kulima-color-link-hover:     var(--kulima-green-200);
    --kulima-color-focus:          var(--kulima-green-400);
  }
}