/* ============================================================================
   AMOMS — Design System Foundations (Figma Setup Guide §3)
   Named-token layer on top of shadcn-tokens.css + the AMOMS brand.
   Guide token names use slashes (status/pending); CSS custom properties use
   hyphens (--status-pending). Mapping is 1:1.

   Convention for every functional color:
     --<token>        solid / line / icon color
     --<token>-soft   tint for badge & block backgrounds
     --<token>-fg     text/icon color when placed on -soft
   ============================================================================ */

:root {
  /* ── §3.1 Brand tokens (client-provided, LOCKED — see app.css) ────────────
     --soil / --avocado / --pulp are the only brand hues. Do not add more.   */

  /* ── §3.2 Status palette ─────────────────────────────────────────────── */
  --status-pending:        oklch(0.70 0.16 75);    /* amber  — awaiting action */
  --status-pending-soft:   oklch(0.95 0.06 80);
  --status-pending-fg:     oklch(0.46 0.12 65);

  --status-in-progress:      oklch(0.58 0.13 230);  /* blue — work in progress */
  --status-in-progress-soft: oklch(0.94 0.04 230);
  --status-in-progress-fg:   oklch(0.45 0.13 250);

  --status-approved:       oklch(0.55 0.13 145);   /* green — success / passed */
  --status-approved-soft:  oklch(0.93 0.05 145);
  --status-approved-fg:    oklch(0.40 0.11 150);

  --status-rejected:       oklch(0.577 0.245 27);  /* red — failed / blocked  */
  --status-rejected-soft:  oklch(0.95 0.05 25);
  --status-rejected-fg:    oklch(0.51 0.21 27);

  --status-closed:         oklch(0.55 0.01 60);    /* neutral — closed/archived */
  --status-closed-soft:    oklch(0.95 0.005 70);
  --status-closed-fg:      oklch(0.44 0.01 60);

  /* ── Semantic bridge — ONE source for status text/icons on soft tints ───
     The legacy --success / --warning / --info (app.css) map 1:1 onto the
     status hues above. These -fg tokens give every platform a single
     amber / green / blue / red text+icon colour instead of per-app oklch
     hardcodes. -fg values auto-flip in dark mode (status-*-fg overrides). */
  --success-fg:   var(--status-approved-fg);
  --warning-fg:   var(--status-pending-fg);
  --info-fg:      var(--status-in-progress-fg);
  --danger-fg:    var(--status-rejected-fg);
  --danger-soft:  var(--status-rejected-soft);

  /* System chrome shared by the field apps (offline bars, offline sync chips) */
  --system-offline:     oklch(0.32 0.02 60);
  --system-offline-fg:  oklch(0.96 0.01 80);

  /* Skeleton shimmer — one base/sheen pair for every platform's loader */
  --skeleton-base:   oklch(0.87 0 0);
  --skeleton-sheen:  oklch(0.93 0 0);

  /* ── §3.2 Severity palette (escalating, colour-blind safe) ─────────────── */
  --severity-low:          oklch(0.60 0.10 240);   /* calm blue */
  --severity-low-soft:     oklch(0.94 0.03 240);
  --severity-low-fg:       oklch(0.46 0.11 245);

  --severity-medium:       oklch(0.72 0.15 80);    /* amber */
  --severity-medium-soft:  oklch(0.95 0.06 82);
  --severity-medium-fg:    oklch(0.47 0.12 68);

  --severity-high:         oklch(0.64 0.18 48);    /* orange */
  --severity-high-soft:    oklch(0.94 0.07 52);
  --severity-high-fg:      oklch(0.50 0.16 45);

  --severity-critical:     oklch(0.53 0.24 27);    /* deep red — must stand out */
  --severity-critical-soft:oklch(0.93 0.07 25);
  --severity-critical-fg:  oklch(0.48 0.22 27);

  /* ── §3.2 Journey palette (lead lifecycle, 6 stages: cool → harvest) ───── */
  --journey-aware:               oklch(0.64 0.04 235);  /* slate — just aware */
  --journey-aware-soft:          oklch(0.95 0.012 235);
  --journey-aware-fg:            oklch(0.46 0.04 235);

  --journey-committee:           oklch(0.58 0.13 230);  /* blue — committed */
  --journey-committee-soft:      oklch(0.94 0.04 230);
  --journey-committee-fg:        oklch(0.45 0.13 250);

  --journey-planted:             oklch(0.58 0.11 45);   /* soil — seed in ground */
  --journey-planted-soft:        oklch(0.94 0.04 45);
  --journey-planted-fg:          oklch(0.45 0.10 40);

  --journey-growing:             oklch(0.52 0.11 135);  /* avocado — growing */
  --journey-growing-soft:        oklch(0.93 0.05 135);
  --journey-growing-fg:          oklch(0.40 0.10 138);

  --journey-first-harvest:       oklch(0.75 0.14 85);   /* gold — promote prompt */
  --journey-first-harvest-soft:  oklch(0.95 0.06 88);
  --journey-first-harvest-fg:    oklch(0.48 0.12 80);

  --journey-procurement-active:      oklch(0.45 0.10 145); /* deep green — active */
  --journey-procurement-active-soft: oklch(0.92 0.05 145);
  --journey-procurement-active-fg:   oklch(0.38 0.09 148);

  /* ── §3.3 Data-viz palette ──────────────────────────────────────────────
     5-colour categorical (Okabe–Ito derived, colour-blind safe). Charts use
     ONLY these + the single-hue sequential ramp below.                      */
  --cat-1: oklch(0.55 0.13 245);   /* blue        ≈ #0072B2 */
  --cat-2: oklch(0.74 0.15 65);    /* orange      ≈ #E69F00 */
  --cat-3: oklch(0.64 0.12 165);   /* bluish-green≈ #009E73 */
  --cat-4: oklch(0.58 0.19 35);    /* vermillion  ≈ #D55E00 */
  --cat-5: oklch(0.66 0.11 350);   /* purple      ≈ #CC79A7 */

  /* Sequential single-hue ramp (avocado green) — for heat/quantity scales */
  --seq-1: oklch(0.92 0.05 140);
  --seq-2: oklch(0.78 0.09 138);
  --seq-3: oklch(0.62 0.11 136);
  --seq-4: oklch(0.50 0.11 134);
  --seq-5: oklch(0.38 0.09 132);

  /* ── §3.4 Type scale — token sizes (web defaults) ───────────────────────
     One set of token names across web/tablet/mobile; web is largest, mobile
     smallest (breakpoint overrides below), tablet sits between.            */
  --display-lg:  48px;  --display-lg-lh:  1.00;
  --display-md:  40px;  --display-md-lh:  1.05;
  --display-sm:  32px;  --display-sm-lh:  1.10;

  --heading-1:   28px;  --heading-1-lh:   1.15;
  --heading-2:   22px;  --heading-2-lh:   1.20;
  --heading-3:   18px;  --heading-3-lh:   1.30;

  --body-lg:     16px;  --body-lg-lh:     1.60;
  --body-md:     14px;  --body-md-lh:     1.55;
  --body-sm:     13px;  --body-sm-lh:     1.50;

  --label-lg:    14px;  --label-lg-lh:    1.20;
  --label-md:    12.5px;--label-md-lh:    1.20;
  --label-sm:    11.5px;--label-sm-lh:    1.35;

  --mono-md:     13px;  --mono-md-lh:     1.45;

  /* ── §3.5 Spacing scale — 4-pt base ─────────────────────────────────────
     All paddings, gaps, margins should resolve to a multiple of 4.         */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── §3.5 Grid (per device class) ───────────────────────────────────── */
  --grid-cols-web:      12;  --grid-gutter-web:    24px;  --grid-margin-web:    80px;
  --grid-cols-tablet:   8;   --grid-gutter-tablet: 16px;  --grid-margin-tablet: 24px;
  --grid-cols-mobile:   4;   --grid-gutter-mobile: 16px;  --grid-margin-mobile: 16px;
}

/* Tablet tier — headlines step down from web */
@media (max-width: 1100px) {
  :root {
    --display-lg: 40px; --display-md: 34px; --display-sm: 28px;
    --heading-1: 25px;  --heading-2: 21px;  --heading-3: 17px;
  }
}
/* Mobile tier — smallest headlines */
@media (max-width: 640px) {
  :root {
    --display-lg: 34px; --display-md: 30px; --display-sm: 26px;
    --heading-1: 23px;  --heading-2: 19px;  --heading-3: 17px;
    --body-lg: 15px;
  }
}

/* ── Dark-mode soft-tint overrides (badges stay legible on dark cards) ──── */
.dark {
  --status-pending-soft:   oklch(0.33 0.06 75);  --status-pending-fg:   oklch(0.86 0.10 82);
  --status-in-progress-soft: oklch(0.30 0.06 240); --status-in-progress-fg: oklch(0.84 0.10 240);
  --status-approved-soft:  oklch(0.30 0.06 145); --status-approved-fg:  oklch(0.85 0.11 145);
  --status-rejected-soft:  oklch(0.33 0.08 27);  --status-rejected-fg:  oklch(0.85 0.12 25);
  --status-closed-soft:    oklch(0.30 0.005 70); --status-closed-fg:    oklch(0.80 0.01 70);

  /* Semantic bridge — dark overrides (offline bar + skeleton; -fg flip via status-*) */
  --system-offline:   oklch(0.26 0.02 60);
  --skeleton-base:    oklch(0.28 0 0);
  --skeleton-sheen:   oklch(0.34 0 0);

  --severity-low-soft:     oklch(0.30 0.05 240); --severity-low-fg:     oklch(0.84 0.09 240);
  --severity-medium-soft:  oklch(0.33 0.06 82);  --severity-medium-fg:  oklch(0.86 0.10 84);
  --severity-high-soft:    oklch(0.33 0.08 50);  --severity-high-fg:    oklch(0.84 0.12 52);
  --severity-critical-soft:oklch(0.34 0.10 27);  --severity-critical-fg:oklch(0.86 0.13 25);

  --journey-aware-soft:          oklch(0.30 0.02 235); --journey-aware-fg:          oklch(0.82 0.03 235);
  --journey-committee-soft:      oklch(0.30 0.06 230); --journey-committee-fg:      oklch(0.84 0.10 240);
  --journey-planted-soft:        oklch(0.31 0.05 45);  --journey-planted-fg:        oklch(0.84 0.08 50);
  --journey-growing-soft:        oklch(0.30 0.05 135); --journey-growing-fg:        oklch(0.84 0.10 138);
  --journey-first-harvest-soft:  oklch(0.34 0.07 85);  --journey-first-harvest-fg:  oklch(0.88 0.11 86);
  --journey-procurement-active-soft: oklch(0.30 0.05 145); --journey-procurement-active-fg: oklch(0.85 0.10 146);
}

/* ============================================================================
   TYPE SCALE — utility classes (consume the tokens above)
   ============================================================================ */
.text-display-lg { font-family: var(--font-heading); font-size: var(--display-lg); line-height: var(--display-lg-lh); font-weight: 600; letter-spacing: -0.025em; }
.text-display-md { font-family: var(--font-heading); font-size: var(--display-md); line-height: var(--display-md-lh); font-weight: 600; letter-spacing: -0.022em; }
.text-display-sm { font-family: var(--font-heading); font-size: var(--display-sm); line-height: var(--display-sm-lh); font-weight: 600; letter-spacing: -0.02em; }

.text-heading-1 { font-family: var(--font-heading); font-size: var(--heading-1); line-height: var(--heading-1-lh); font-weight: 600; letter-spacing: -0.02em; }
.text-heading-2 { font-family: var(--font-heading); font-size: var(--heading-2); line-height: var(--heading-2-lh); font-weight: 600; letter-spacing: -0.01em; }
.text-heading-3 { font-family: var(--font-heading); font-size: var(--heading-3); line-height: var(--heading-3-lh); font-weight: 600; }

.text-body-lg { font-size: var(--body-lg); line-height: var(--body-lg-lh); }
.text-body-md { font-size: var(--body-md); line-height: var(--body-md-lh); }
.text-body-sm { font-size: var(--body-sm); line-height: var(--body-sm-lh); }

.text-label-lg { font-size: var(--label-lg); line-height: var(--label-lg-lh); font-weight: 500; }
.text-label-md { font-size: var(--label-md); line-height: var(--label-md-lh); font-weight: 500; }
.text-label-sm { font-size: var(--label-sm); line-height: var(--label-sm-lh); font-weight: 500; }

.text-mono-md { font-family: var(--font-mono); font-size: var(--mono-md); line-height: var(--mono-md-lh); }

/* ============================================================================
   BADGE TONES — canonical status / severity / journey
   (extends the .badge base defined in app.css)
   ============================================================================ */
.badge-pending      { background: var(--status-pending-soft);      color: var(--status-pending-fg); }
.badge-in-progress  { background: var(--status-in-progress-soft);  color: var(--status-in-progress-fg); }
.badge-approved     { background: var(--status-approved-soft);     color: var(--status-approved-fg); }
.badge-rejected     { background: var(--status-rejected-soft);     color: var(--status-rejected-fg); }
.badge-closed       { background: var(--status-closed-soft);       color: var(--status-closed-fg); }

.badge-sev-low      { background: var(--severity-low-soft);        color: var(--severity-low-fg); }
.badge-sev-medium   { background: var(--severity-medium-soft);     color: var(--severity-medium-fg); }
.badge-sev-high     { background: var(--severity-high-soft);       color: var(--severity-high-fg); }
.badge-sev-critical { background: var(--severity-critical-soft);   color: var(--severity-critical-fg);
                      border-color: oklch(from var(--severity-critical) l c h / 0.4); font-weight: 600; }

.badge-jrn-aware              { background: var(--journey-aware-soft);              color: var(--journey-aware-fg); }
.badge-jrn-committee          { background: var(--journey-committee-soft);          color: var(--journey-committee-fg); }
.badge-jrn-planted            { background: var(--journey-planted-soft);            color: var(--journey-planted-fg); }
.badge-jrn-growing            { background: var(--journey-growing-soft);            color: var(--journey-growing-fg); }
.badge-jrn-first-harvest      { background: var(--journey-first-harvest-soft);      color: var(--journey-first-harvest-fg); }
.badge-jrn-procurement-active { background: var(--journey-procurement-active-soft); color: var(--journey-procurement-active-fg); }

/* ============================================================================
   GRID UTILITIES (per §3.5)
   .grid-container applies the device outer-margin; .grid-12/8/4 the columns.
   ============================================================================ */
.grid-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--grid-margin-web);
}
.grid-12 { display: grid; grid-template-columns: repeat(var(--grid-cols-web), minmax(0, 1fr)); gap: var(--grid-gutter-web); }
.grid-8  { display: grid; grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr)); gap: var(--grid-gutter-tablet); }
.grid-4c { display: grid; grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0, 1fr)); gap: var(--grid-gutter-mobile); }

@media (max-width: 1100px) {
  .grid-container { padding-inline: var(--grid-margin-tablet); }
  .grid-12 { grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr)); gap: var(--grid-gutter-tablet); }
}
@media (max-width: 640px) {
  .grid-container { padding-inline: var(--grid-margin-mobile); }
  .grid-12, .grid-8 { grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0, 1fr)); gap: var(--grid-gutter-mobile); }
}