/* =============================================================================
   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.
   ========================================================================== */

: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-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);

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

  /* fonts */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------------------------------------------------------------------
     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 modest scale; a dense working surface wants few sizes */
  --text-2xs: 10.5px;
  --text-xs:  11.5px;
  --text-sm:  12.5px;
  --text-md:  14px;
  --text-lg:  17px;
  --text-xl:  21px;
  --text-2xl: 28px;
  --text-3xl: 40px;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-label: .06em;

  --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 */
  --shadow-card: 0 1px 2px rgba(28, 38, 33, .05);
  --shadow-panel: -14px 0 44px rgba(28, 38, 33, .14);
  --scrim: rgba(28, 38, 33, .34);

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

  /* layers */
  --layer-scrim: 40;
  --layer-panel: 41;
  --layer-toast: 60;

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

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