/* =============================================================
   ICO Design System — colors & typography tokens
   International Coffee Organization

   CANONICAL design-token source. New pages and stylesheets take
   their colors from here — either directly or, on pages that can't
   load this sheet, as var(--token, #hex) mirrors (see atlas_theme.css,
   ico-nav.css, matrix.css).

   WARNING — shared-name collision with ico_branding.css: both sheets
   define --bg-elevated, --border and --border-strong (plus
   --shadow-sm/-md/-lg) with OPPOSITE light/dark values (this sheet is
   light-first, ico_branding.css is dark-first). NEVER load both on
   one page — whichever loads later silently rethemes the other.
   ============================================================= */

/* ---------- Web fonts ----------
   Wordmark + display uses a heavy geometric grotesque (logo is Helvetica
   Black / Akzidenz family). Google Fonts substitution: Archivo Black for
   display, Archivo for UI/body. JetBrains Mono for code/data.
   If you have licensed Helvetica Neue, swap the --font-* vars at the top.
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Height of the global top nav (.topnav). The overview section nav
     (.dash-sticky-nav) pins directly below it, so both stay visible on
     scroll — keep these coupled to this single value. */
  --topnav-h: 72px;

  /* ============================================================
     COLORS — sourced directly from supplied logo variants
     ============================================================ */

  /* Brand primary — coffee browns (the institutional voice) */
  --coffee-900: #2a1612;          /* deepest, used as ink on cream */
  --coffee-800: #3d1f1a;
  --coffee-700: #512a24;          /* Coffee Brown logo — primary brand */
  --coffee-600: #6b3a32;
  --coffee-500: #8a5048;
  --coffee-400: #b07e75;
  --coffee-300: #d4ada4;

  /* Brand cream — the warm "unroasted bean" canvas */
  --cream-50:  #faf3e1;           /* lightest backdrop */
  --cream-100: #f5ead0;
  --cream-200: #edd6a4;           /* Unroasted Bean Cream logo — primary surface */
  --cream-300: #e0c282;
  --cream-400: #c9a55e;

  /* Accent — coffee cherry red / dark orange (harvest) */
  --cherry-700: #6d0b24;          /* Deep Red logo — formal accent */
  --cherry-600: #8d1226;
  --cherry-500: #b12e0b;          /* Dark Orange logo — vibrant cherry */
  --cherry-400: #c95227;

  /* Accent — leaf greens (origin / sustainability) */
  --leaf-900:  #1f2410;
  --leaf-800:  #313713;           /* Dark Green logo */
  --leaf-700:  #4a5a24;
  --leaf-600:  #678e3e;           /* Vibrant Green logo — fresh */
  --leaf-500:  #87a85d;
  --leaf-400:  #a8c184;

  /* Neutrals */
  --ink:       #000000;
  --paper:    #ffffff;
  --grey-100: #f4f4f3;
  --grey-200: #e7e7e5;
  --grey-300: #d2d3d1;            /* Grey logo */
  --grey-400: #a8a9a6;
  --grey-500: #6f706d;
  --grey-700: #3a3b39;

  /* ============================================================
     SEMANTIC COLOR ROLES
     ============================================================ */
  --bg:           var(--cream-50);       /* main page surface */
  --bg-elevated:  var(--paper);          /* cards, panels */
  --bg-inverse:   var(--coffee-900);     /* dark sections, footers */
  --bg-accent:    var(--cream-200);      /* highlight bands */

  --fg:           var(--coffee-900);     /* primary text */
  --fg-muted:     var(--coffee-600);     /* secondary text */
  --fg-subtle:    var(--grey-500);       /* tertiary, meta */
  --fg-inverse:   var(--cream-50);       /* text on dark */
  --fg-on-accent: var(--coffee-900);     /* text on cream */

  --border:        rgba(81, 42, 36, 0.14);
  --border-strong: rgba(81, 42, 36, 0.32);
  --divider:       rgba(81, 42, 36, 0.08);

  --brand:         var(--coffee-700);     /* primary brand action */
  --brand-hover:   var(--coffee-800);
  --brand-press:   var(--coffee-900);

  --accent-cherry: var(--cherry-500);     /* data / alerts / harvest */
  --accent-leaf:   var(--leaf-600);       /* origin / sustainability */

  /* Semantic data colors (charts, badges) */
  --data-arabica:  var(--cherry-500);
  --data-robusta:  var(--leaf-600);
  --data-other:    var(--coffee-700);
  --data-neutral:  var(--grey-400);

  /* States */
  --success: var(--leaf-600);
  --warning: var(--cherry-500);
  --danger:  var(--cherry-700);
  --info:    var(--coffee-600);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Type scale — major-third 1.25, anchored 16px */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Leading */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Tracking — the wordmark is set tight, headers are tight, body is normal */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;     /* eyebrow labels, captions */
  --tracking-wider:   0.08em;     /* tags, status pills (all caps) */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII — restrained. ICO is institutional, not playful.
     The logomark is the only "round" thing; UI keeps small radii.
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;           /* status pills only */

  /* ============================================================
     SHADOWS — minimal, used sparingly for elevated dropdowns / modals
     ============================================================ */
  --shadow-xs: 0 1px 0 rgba(42, 22, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(42, 22, 18, 0.08), 0 1px 0 rgba(42, 22, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(42, 22, 18, 0.10);
  --shadow-lg: 0 12px 32px rgba(42, 22, 18, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   400ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1360px;
  --gutter:           24px;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Use these as defaults; override per-component if needed.
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — for hero numbers / posters / quote covers */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

/* Eyebrow — uppercase tag above a heading; very brand-typical */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--coffee-700);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.small, small {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

.meta {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--coffee-700);
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--coffee-900); text-decoration-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-8) 0; }

/* =============================================================
   DARK THEME — keyed off <html data-theme="dark">.
   Same brand palette, inverted semantic surfaces. Synced with
   the legacy unified_dashboard.html (which writes localStorage
   .ico-theme on toggle). Every component that uses --bg / --fg /
   --border / --paper auto-reflows.
   ============================================================= */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg:           #2a1612;    /* coffee-900 — main page surface */
  --bg-elevated:  #3d1f1a;    /* coffee-800 — cards, panels */
  --bg-inverse:   #faf3e1;    /* cream-50 */
  --bg-accent:    #512a24;    /* coffee-700 — highlight bands */
  --paper:        #3d1f1a;    /* coffee-800 — alias of bg-elevated */

  --fg:           #faf3e1;    /* cream-50 */
  --fg-muted:     #edd6a4;    /* cream-200 */
  --fg-subtle:    #c9a55e;    /* cream-400 */
  --fg-inverse:   #2a1612;    /* coffee-900 */
  --fg-on-accent: #faf3e1;

  --border:        rgba(237, 214, 164, 0.16);
  --border-strong: rgba(237, 214, 164, 0.36);
  --divider:       rgba(237, 214, 164, 0.10);
}

[data-theme="dark"] body { background: var(--bg); color: var(--fg); }

[data-theme="dark"] .topnav,
[data-theme="dark"] .uni-groupnav,
[data-theme="dark"] .uni-crumb { background: rgba(42, 22, 18, 0.92); }

[data-theme="dark"] .brand .platform .name,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] .uni-groupbtn { color: var(--cream-50); }

[data-theme="dark"] .home-card,
[data-theme="dark"] .uni-dropdown,
[data-theme="dark"] .uni-droprow,
[data-theme="dark"] .panel,
[data-theme="dark"] .dash-panel,
[data-theme="dark"] .dash-kpi { background: var(--bg-elevated); color: var(--fg); border-color: var(--border); }

[data-theme="dark"] .uni-search input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--bg-elevated); color: var(--fg); border-color: var(--border); }

[data-theme="dark"] .nav-stat .val,
[data-theme="dark"] .crumb-tab,
[data-theme="dark"] .crumb-group { color: var(--cream-200); }

[data-theme="dark"] .footer       { background: var(--coffee-900); color: var(--fg); }
[data-theme="dark"] ::selection   { background: var(--cherry-500); color: var(--cream-50); }

[data-theme="dark"] a              { color: var(--cream-200); }
[data-theme="dark"] a:hover        { color: var(--cream-50); }