/* ============================================================================
   Food Chain Lens: design tokens (warm, human, food-first)
   ----------------------------------------------------------------------------
   A light, grounded, editorial design language for a food-security intelligence
   platform (backend package: gcmrp). Warm paper surfaces, deep-navy text, muted
   food colours, a serif for editorial headlines, sans for UI, mono for data.

   Fonts loaded by index.html before this file.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------- */
  /*  SURFACES: warm paper, soft cards                                       */
  /* ---------------------------------------------------------------------- */
  --paper:        #F6F1E8;
  --paper-2:      #FBF8F1;
  --card:         #FFFFFF;
  --card-2:       #FCFAF5;
  --sunken:       #F1EBDF;
  --shelf:        #EFE7D8;

  /* ---------------------------------------------------------------------- */
  /*  LINES: warm hairlines                                                  */
  /* ---------------------------------------------------------------------- */
  --line-soft:    #EFE7DA;
  --line:         #E5DCCB;
  --line-strong:  #D6CBB6;

  /* ---------------------------------------------------------------------- */
  /*  TEXT: deep navy ink                                                    */
  /* ---------------------------------------------------------------------- */
  --ink-1: #1E2D3B;
  --ink-2: #4A5B6A;
  --ink-3: #76828F;
  --ink-4: #A2AAB2;
  --on-color: #FFFFFF;

  /* ---------------------------------------------------------------------- */
  /*  FOOD ACCENTS: muted, never neon                                        */
  /* ---------------------------------------------------------------------- */
  --wheat:          #C2862A;
  --wheat-2:        #E6C463;
  --wheat-wash:     #F4E8CC;
  --leaf:           #4E8C5A;
  --leaf-wash:      #DEEBDD;
  --milk:           #5E86B8;
  --milk-wash:      #E0E8F2;
  --egg:            #E0A93E;
  --egg-wash:       #F6E7C4;
  --teal:           #2E8B86;
  --teal-wash:      #D6E8E5;
  --terracotta:     #C2683C;
  --terracotta-wash:#F2DDD0;
  --earth:          #997A4E;
  --earth-wash:     #EAE1D0;
  --risk:           #BE4338;
  --risk-wash:      #F3D9D5;

  /* Primary interactive: a confident, trustworthy blue */
  --accent:      #2F5E8C;
  --accent-600:  #274F77;
  --accent-300:  #7AA1C6;
  --accent-wash: #DEE8F1;

  /* ---------------------------------------------------------------------- */
  /*  RISK PRESSURE RAMP: 0.00 to 1.00                                      */
  /* ---------------------------------------------------------------------- */
  --risk-0: #4E8C5A;
  --risk-1: #8AA64E;
  --risk-2: #D2A23C;
  --risk-3: #CB7A3C;
  --risk-4: #BE4338;
  --risk-low:  var(--risk-0);
  --risk-mid:  var(--risk-2);
  --risk-high: var(--risk-4);

  /* ---------------------------------------------------------------------- */
  /*  SIGNAL: price direction                                                */
  /* ---------------------------------------------------------------------- */
  --sig-up:        #BE4338;
  --sig-down:      #4E8C5A;
  --sig-flat:      #76828F;
  --sig-up-wash:   #F3D9D5;
  --sig-down-wash: #DEEBDD;

  --status-live:  #4E8C5A;
  --status-warn:  #D2A23C;
  --status-alert: #BE4338;
  --status-idle:  #A2AAB2;

  /* ---------------------------------------------------------------------- */
  /*  GRAPH NODE-TYPE PALETTE                                                */
  /* ---------------------------------------------------------------------- */
  --node-product:   #2F5E8C;
  --node-retailer:  #7E8A8C;
  --node-business:  #B07A4A;
  --node-input:     #99853F;
  --node-commodity: #C2862A;
  --node-origin:    #2E8B86;
  --node-cost:      #C2683C;
  --node-risk:      #BE4338;
  --node-market:    #4E8C5A;
  --node-transport: #7E8A8C;

  /* group bands */
  --group-shelf:      var(--accent-wash);
  --group-production: var(--earth-wash);
  --group-inputs:     #EFE7D0;
  --group-commodity:  var(--wheat-wash);
  --group-origin:     var(--teal-wash);
  --group-risk:       var(--risk-wash);
  --group-market:     var(--leaf-wash);

  /* ---------------------------------------------------------------------- */
  /*  ELEVATION: soft warm shadows                                           */
  /* ---------------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(70,52,24,0.06);
  --shadow-md:   0 4px 16px rgba(70,52,24,0.08);
  --shadow-lg:   0 14px 40px rgba(70,52,24,0.12);
  --shadow-card: 0 1px 2px rgba(70,52,24,0.05), 0 7px 22px rgba(70,52,24,0.05);

  /* ---------------------------------------------------------------------- */
  /*  RADII                                                                  */
  /* ---------------------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   13px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------- */
  /*  SPACING (4px base)                                                     */
  /* ---------------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---------------------------------------------------------------------- */
  /*  TYPE                                                                   */
  /* ---------------------------------------------------------------------- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --t-display: 40px;
  --t-h1: 30px;
  --t-h2: 22px;
  --t-h3: 16px;
  --t-body: 15px;
  --t-sm: 13.5px;
  --t-cap: 12px;
  --t-micro: 11px;

  --lh-tight: 1.14;
  --lh-snug:  1.34;
  --lh-body:  1.6;

  --track-eyebrow: 0.13em;
}

/* ============================================================================
   SEMANTIC TYPE PRIMITIVES
   ============================================================================ */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-display { font-family: var(--font-serif); font-size: var(--t-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--ink-1); }
.t-h1 { font-family: var(--font-serif); font-size: var(--t-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.005em; color: var(--ink-1); }
.t-h2 { font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-snug); color: var(--ink-1); }
.t-h3 { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-snug); color: var(--ink-1); }

.t-body { font-family: var(--font-sans); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); color: var(--ink-2); }
.t-sm   { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-body); color: var(--ink-2); }
.t-cap  { font-family: var(--font-sans); font-size: var(--t-cap); font-weight: 400; line-height: var(--lh-snug); color: var(--ink-3); }

.t-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); }
.t-data-lg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-1); }
.t-data    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-body); font-weight: 500; color: var(--ink-1); }
.t-data-sm { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-cap); font-weight: 500; color: var(--ink-2); }