/* ============================================================
   Grocery Price Tracker — Design tokens
   Cost of Living Commission · Government of Bermuda
   Brand colours match the CoLC document stripe exactly.
   ============================================================ */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/poppins-800.woff2") format("woff2");
}

:root {
  /* Official CoLC stripe colours — do not alter */
  --navy-800:   #16324F;
  --teal-600:   #2E8B7A;
  --gold-600:   #D9A821;
  --orange-600: #D9662A;

  /* Derived shades */
  --navy-900:   #0F2438;
  --navy-600:   #2C4A6B;
  --navy-100:   #E8EDF3;
  --teal-700:   #23705F;
  --teal-100:   #E7F3F0;
  --gold-400:   #F0C245;
  --gold-100:   #FBF3DC;
  --gold-800:   #8A6A12;
  --orange-100: #FBEADF;
  --orange-800: #9E4A1E;

  /* Neutrals */
  --grey-900: #1B2733;
  --grey-600: #5A6B7A;
  --grey-300: #E3E9ED;
  --grey-100: #F5F7F8;
  --grey-50:  #F8FAFB;
  --white:    #FFFFFF;

  /* Semantic aliases — components use these */
  --color-primary:        var(--navy-800);
  --color-primary-deep:   var(--navy-900);
  --color-accent:         var(--teal-600);
  --color-accent-strong:  var(--teal-700);
  --color-accent-tint:    var(--teal-100);
  --color-highlight:      var(--gold-600);
  --color-highlight-dark: var(--gold-400);
  --color-warm:           var(--orange-600);
  --color-bg:             var(--grey-100);
  --color-surface:        var(--white);
  --color-text:           var(--grey-900);
  --color-text-muted:     var(--grey-600);
  --color-text-invert:    #FFFFFF;
  --color-border:         var(--grey-300);

  /* Typography */
  --font-display: "Poppins", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-wordmark: Georgia, "Times New Roman", serif;

  --text-xs: .6875rem;
  --text-sm: .8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-hero: clamp(2.125rem, 5.5vw, 3.375rem);

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card:   0 1px 3px rgba(22, 50, 79, .08), 0 4px 14px rgba(22, 50, 79, .06);
  --shadow-raised: 0 4px 10px rgba(22, 50, 79, .12), 0 10px 28px rgba(22, 50, 79, .10);
  --shadow-sticky: 0 -4px 16px rgba(22, 50, 79, .15);

  /* Layout */
  --container: 1100px;
}