@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Mukta:wght@400;500;600;700&family=Inter:wght@400;500;600&family=DM+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand palette — sourced directly from brand guidelines.
     Don't consume these raw in component CSS; use the semantic
     tokens below instead, so a re-theme never has to touch
     individual component files. ──────────────────────────── */
  --brand-deep-harbor: #24455C; /* Trust anchor — headers, primary buttons, chrome */
  --brand-steel-blue:  #84A9C0; /* Friendly accent — highlights, secondary buttons, info surfaces. NEVER as text color. */
  --brand-sand-dune:   #efeee79f; /* Warm surfaces — customer-facing headers, cards, dividers */
  --brand-cream:       #F6F3E8; /* Default background — warm, never stark white */
  --brand-ink-blue:    #0F2534; /* Deepest text, on light-blue fills */
  --brand-slate-mist:  #5E7A8C; /* Secondary/muted text on cream & white */
  --brand-clay:        #24455C; /* Reserve appetite accent — FoodFinder ONLY. Never in B2B dashboard chrome. */

  --brand-success: #2E7D52;
  --brand-warning: #C79A3B;
  --brand-error:   #B5432F;
  --brand-info:    #84A9C0;

  /* ── Semantic tokens — what components should actually use ── */
  --bg:            var(--brand-cream);
  --surface:       #ffffff;
  --surface2:      var(--brand-sand-dune);
  --surface3:      #EFEADA;              /* one step darker than sand, for nested surfaces */
  --border:        rgba(36, 69, 92, 0.14);   /* Deep Harbor at low opacity */
  --border-strong: rgba(36, 69, 92, 0.28);

  --text:          var(--brand-ink-blue);
  --text-muted:    var(--brand-slate-mist);
  --text-light:    var(--brand-slate-mist);
  --text-inverse:  var(--brand-cream);

  --accent:        var(--brand-deep-harbor);
  --accent-hover:  #1B3446;              /* Deep Harbor, darkened ~15% */
  --accent-light:  rgba(132, 169, 192, 0.18); /* Steel Blue tint — hover/active fills */
  --accent2:       var(--brand-steel-blue);   /* secondary accent / info fills */

  --clay:          var(--brand-clay);    /* opt in explicitly for FoodFinder-only surfaces */

  --success:       var(--brand-success);
  --success-light: rgba(46, 125, 82, 0.12);
  --warning:       var(--brand-warning);
  --warning-light: rgba(199, 154, 59, 0.12);
  --error:         var(--brand-error);
  --error-light:   rgba(181, 67, 47, 0.12);
  --info:          var(--brand-info);

  /* ── Typography ── */
  --font-heading: 'Poppins', system-ui, sans-serif;   /* SemiBold/Bold headings */
  --font-body:    'Mukta', 'Inter', system-ui, sans-serif;
  --font:         var(--font-body);                    /* default body/UI font */
  --mono:         'DM Mono', 'Courier New', monospace;  /* tabular numerals — prices, dashboards */

  /* ── Shape & elevation ── */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 4px rgba(15, 37, 52, 0.06);
  --shadow-md: 0 4px 24px rgba(15, 37, 52, 0.09);
  --shadow-lg: 0 16px 60px rgba(15, 37, 52, 0.12);

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Dark console tokens — for chrome-heavy admin/ops screens
     (review queues, dashboards, sidebars) where a dark surface
     reads better than cream. Still built strictly from the
     brand palette, just inverted. These sit alongside the light
     tokens above (not a class toggle) so a component can opt in
     per-token by aliasing to --console-* directly. ──────────── */
  --console-bg:            var(--brand-ink-blue);
  --console-surface:       #16303F;  /* Deep Harbor, darkened */
  --console-surface2:      #1C3A4C;
  --console-surface3:      #234A60;
  --console-border:        rgba(132, 169, 192, 0.18);
  --console-border-strong: rgba(132, 169, 192, 0.32);

  --console-text:          var(--brand-cream);
  --console-text-muted:    var(--brand-steel-blue);
  --console-text-light:    rgba(246, 243, 232, 0.55);

  --console-accent:        var(--brand-steel-blue);
  --console-accent-hover:  #9FBED0;
  --console-accent-light:  rgba(132, 169, 192, 0.16);
  --console-accent2:       var(--brand-sand-dune);

  --console-success-light: rgba(46, 125, 82, 0.22);
  --console-warning-light: rgba(199, 154, 59, 0.22);
  --console-error-light:   rgba(181, 67, 47, 0.22);

  --console-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --console-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --console-shadow-lg: 0 16px 60px rgba(0, 0, 0, 0.5);
}