/* =============================================================================
   THE DESK — DESIGN TOKENS
   The one file to edit for a reskin. Nothing below this file's semantic layer
   should ever hardcode a colour, a size, or a duration.

   Three layers, in order:
     1. BRAND      raw palette. Swap these for Dole's official hexes.
     2. SEMANTIC   what a colour MEANS here (surface, ink, accent, critical).
                   Components only ever reference this layer.
     3. SCALES     space, type, radius, shadow, motion, layers.

   Then the same semantic layer again, for dark mode: once for a viewer whose
   system asks for it (unless they chose light on the desk), and once for a
   viewer who chose dark. Depth in the dark comes from lightness rather than
   shadow, so cards sit LIGHTER than the ground, borders dim, and the tints that
   carry meaning lose saturation instead of glowing.

   See docs/ui-guide.md for the rules these serve.
   ========================================================================== */

/* Inter, self-hosted: no font CDN, nothing in the page calls out. SIL OFL 1.1,
   which allows bundling; the licence sits beside the file. One variable face
   covers every weight the desk uses. */
@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND
     Dole-INSPIRED, not verified against their brand guide: sunshine yellow, a
     red, and a leaf green. If you have the official values, replace these five
     and the whole app reskins — nothing else needs touching.
     ------------------------------------------------------------------------ */
  --brand-green:  #0E7A3C;   /* leaf — primary actions, selection */
  --brand-yellow: #FFC72C;   /* sunshine — attention, the desk's recommendation */
  --brand-red:    #C8262C;   /* the red in the wordmark — saturation, overfill */
  --brand-ink:    #1C2621;   /* near-black with a green cast */
  --brand-paper:  #FAF8F2;   /* warm off-white ground */

  /* Tints and shades derived from the brand, so a brand swap carries through.
     Kept as literals rather than colour-mix() for older-browser safety. */
  --green-050: #F0F7F2;
  --green-100: #D9EBDF;
  --green-200: #A9D2B8;
  --green-600: #17864A;
  --green-700: var(--brand-green);
  --green-900: #0A4A26;

  --yellow-050: #FFFAE8;
  --yellow-100: #FFF0BF;
  --yellow-300: #FFD966;
  --yellow-500: var(--brand-yellow);
  --yellow-700: #A97C00;

  --red-050: #FDF0EF;
  --red-100: #F8D8D6;
  --red-600: var(--brand-red);
  --red-800: #8E1A1F;

  --neutral-000: #FFFFFF;
  --neutral-050: var(--brand-paper);
  --neutral-100: #F1EEE6;
  --neutral-200: #E2DED2;
  --neutral-300: #CFCABB;
  --neutral-500: #8A8676;
  --neutral-700: #5A5A50;
  --neutral-900: var(--brand-ink);

  /* ---------------------------------------------------------------------------
     2. SEMANTIC — the only layer components may use
     ------------------------------------------------------------------------ */

  /* surfaces, from furthest back to nearest front */
  --ground:        var(--neutral-050);
  --surface:       var(--neutral-000);
  --surface-sunk:  var(--neutral-100);
  --surface-raised: var(--neutral-000);
  --surface-inverse: var(--neutral-900);

  /* text */
  --ink:        var(--neutral-900);
  --ink-muted:  var(--neutral-700);
  --ink-faint:  var(--neutral-500);
  --ink-faint-aa: #6F6B5E;   /* faint ink that still clears 4.5:1 at 11px, where labels are that small */
  --ink-on-dark: #F2F1E9;
  --ink-on-accent: #FFFFFF;

  /* lines */
  --border:      var(--neutral-200);
  --border-soft: var(--neutral-100);
  --border-strong: var(--neutral-300);

  /* the primary action colour */
  --accent:        var(--green-700);
  --accent-hover:  var(--green-600);
  --accent-tint:   var(--green-050);
  --accent-tint-strong: var(--green-100);
  --accent-border: var(--green-200);

  /* the desk's own recommendation — deliberately the one warm note */
  --suggest:       var(--yellow-700);
  --suggest-tint:  var(--yellow-050);
  --suggest-border: var(--yellow-300);
  --suggest-strong: var(--yellow-100);   /* the "best next" badge ground */

  /* status. Separate from --accent, per the usual rule: semantic colour is not
     branding, and must not be the same hue as the primary action. */
  --positive:      var(--green-700);
  --positive-tint: var(--green-050);
  --caution:       var(--yellow-700);
  --caution-tint:  var(--yellow-050);
  --critical:      var(--red-600);
  --critical-tint: var(--red-050);
  --critical-strong-tint: var(--red-100);

  /* the three shades a split's segments take, first lane darkest */
  --series-1: var(--green-700);
  --series-2: var(--green-600);
  --series-3: var(--green-200);

  /* the dark chrome. The top bar stays dark in both themes, so its lines and
     hovers are light-on-dark in both. */
  --chrome:        var(--surface-inverse);
  --chrome-line:   rgba(255, 255, 255, .22);
  --chrome-hover:  rgba(255, 255, 255, .10);
  --chrome-active: rgba(255, 255, 255, .16);
  --chrome-attention: var(--yellow-300);

  /* the one filled pill in a row of outlined ones: "this is the one that's on" */
  --selected:     var(--surface-inverse);
  --selected-ink: var(--ink-on-dark);

  --focus-ring: 0 0 0 3px rgba(14, 122, 60, .22);
  --tooltip-bg: var(--neutral-900);
  --tooltip-ink: #F2F1E9;

  /* One font. Figures line up because tabular numerals are on everywhere
     (base.css), not because they are set in a second, monospaced face. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------------------------------------------------------------------------
     3. SCALES
     ------------------------------------------------------------------------ */

  /* space — a 4px base, named by use so components read intelligibly */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* type — a dashboard wants few sizes and none above 24px: density matters
     more than drama. `3xl` survives as a name so nothing breaks, and is the
     same size as `2xl`. */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: var(--text-2xl);

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-label: .05em;
  --tracking-tight: -.02em;   /* large text, tightened */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* shape */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* depth — three levels. If the shadow is the first thing you notice, it is
     wrong: cards barely lift, things that float over content lift more. */
  --shadow-card: 0 1px 2px rgba(28, 38, 33, .05);
  --shadow-popover: 0 1px 3px rgba(28, 38, 33, .06), 0 10px 28px rgba(28, 38, 33, .12);
  --shadow-panel: -14px 0 44px rgba(28, 38, 33, .14);
  --scrim: rgba(28, 38, 33, .34);

  /* motion — 120–180ms, one easing, used everywhere */
  --motion-fast: 120ms;
  --motion: 160ms;
  --ease: cubic-bezier(.3, .8, .3, 1);

  /* layers */
  --layer-scrim: 40;
  --layer-panel: 41;
  --layer-menu: 50;
  --layer-toast: 60;
  --layer-tooltip: 70;

  /* component dimensions that recur */
  --control-size: 26px;        /* the +/- stepper buttons */
  --track-height: 10px;        /* allocation progress track */
  --board-row-min: 44px;       /* comfortable click target on a board row */
  --row-h: 36px;               /* a compact table row: one line, chips not sentences */
  --side-w: 228px;             /* the sidebar, open */
  --side-w-icons: 60px;        /* the sidebar, collapsed to icons */
  --strip-h: 52px;             /* the slim strip on top of the content */
  --panel-w: 540px;            /* the right-hand panel */
  --panel-w-wide: 760px;       /* the line panel, which compares three markets side by side */
  --layer-side: 45;            /* above the content, below menus */
  --layer-strip: 30;           /* the sticky strip: under the scrim and the panel */

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   DARK — a deep green-black rather than navy, because the desk's one brand
   colour is a leaf green. Only the semantic layer moves; components never know.
   Written twice (system preference, and an explicit choice) because CSS has no
   way to share one block between a media query and a selector.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F1512; --surface: #171F1B; --surface-sunk: #121915; --surface-raised: #1E2823;
    --surface-inverse: #090D0B;
    --ink: #E6E9E2; --ink-muted: #AEB5AB; --ink-faint: #7F887D; --ink-faint-aa: #929B90; --ink-on-dark: #E6E9E2; --ink-on-accent: #06140C;
    --border: #2A3530; --border-soft: #202A25; --border-strong: #3B4842;
    --accent: #4CC27E; --accent-hover: #66CF92; --accent-tint: #16271D; --accent-tint-strong: #1D3727; --accent-border: #2E5A40;
    --suggest: #E3B53F; --suggest-tint: #262112; --suggest-border: #6A5522; --suggest-strong: #3A3013;
    --positive: #4CC27E; --positive-tint: #16271D;
    --caution: #E3B53F; --caution-tint: #262112;
    --critical: #F07A73; --critical-tint: #2C1817; --critical-strong-tint: #43211F;
    --series-1: #4CC27E; --series-2: #36955E; --series-3: #2A5E40;
    --chrome-attention: #E3B53F;
    --focus-ring: 0 0 0 3px rgba(76, 194, 126, .28);
    --tooltip-bg: #E6E9E2; --tooltip-ink: #0F1512;
    --selected: #D5DBD2; --selected-ink: #0F1512;
    --shadow-card: none;
    --shadow-popover: 0 0 0 1px #2A3530, 0 12px 32px rgba(0, 0, 0, .5);
    --shadow-panel: -14px 0 44px rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0F1512; --surface: #171F1B; --surface-sunk: #121915; --surface-raised: #1E2823;
  --surface-inverse: #090D0B;
  --ink: #E6E9E2; --ink-muted: #AEB5AB; --ink-faint: #7F887D; --ink-faint-aa: #929B90; --ink-on-dark: #E6E9E2; --ink-on-accent: #06140C;
  --border: #2A3530; --border-soft: #202A25; --border-strong: #3B4842;
  --accent: #4CC27E; --accent-hover: #66CF92; --accent-tint: #16271D; --accent-tint-strong: #1D3727; --accent-border: #2E5A40;
  --suggest: #E3B53F; --suggest-tint: #262112; --suggest-border: #6A5522; --suggest-strong: #3A3013;
  --positive: #4CC27E; --positive-tint: #16271D;
  --caution: #E3B53F; --caution-tint: #262112;
  --critical: #F07A73; --critical-tint: #2C1817; --critical-strong-tint: #43211F;
  --series-1: #4CC27E; --series-2: #36955E; --series-3: #2A5E40;
  --chrome-attention: #E3B53F;
  --focus-ring: 0 0 0 3px rgba(76, 194, 126, .28);
  --tooltip-bg: #E6E9E2; --tooltip-ink: #0F1512;
  --selected: #D5DBD2; --selected-ink: #0F1512;
  --shadow-card: none;
  --shadow-popover: 0 0 0 1px #2A3530, 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-panel: -14px 0 44px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Respect a user who doesn't want movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion: 0ms;
  }
}