/*
 * KG's & INCH's - design tokens
 *
 * Colours are taken from what the brand already uses, not invented:
 *   #71A930  the green of the "KG's & INCH's" wordmark in the admin topmenu
 *   #1A4278  the navy of "Complete Nutrition" under the logo
 * Type is Poppins over Inter. The admin sets the brand name in Playfair
 * Display, but that face is a high-contrast display serif - it thins out on
 * card titles and body copy, so the site uses screen faces instead.
 */

:root {
  /* Brand */
  --green:        #71A930;
  --green-deep:   #5A8726;
  --green-soft:   #EEF6E4;
  --navy:         #1A4278;
  --navy-soft:    #E7EDF6;
  --navy-deep:    #112C50;

  /* Neutrals - warmed very slightly toward the brand green so they sit
     with the palette instead of reading as default greys. */
  --ink:          #1B2119;
  --ink-2:        #46503F;
  --muted:        #6E7A68;
  --line:         #E2E7DD;
  --line-strong:  #CBD3C4;
  --ground:       #FBFCFA;
  --surface:      #FFFFFF;
  --surface-2:    #F4F7F0;

  /* Feedback */
  --ok:           #1E7A4C;
  --warn:         #9A6608;
  --danger:       #A62B20;
  --danger-soft:  #F8E4E1;

  /* Type */
  --font-display: 'Poppins', 'Nirmala UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', 'Nirmala UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Scale */
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.1875rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  2.75rem;
  --step-5:  3.5rem;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Shape */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Elevation. Four steps, and every one of them tinted toward the navy rather
     than a neutral grey - a grey shadow over a warm ground reads as dirt. Cards
     rest at --shadow-xs, lift to --shadow on hover, and only a photograph or a
     modal earns --shadow-lg. */
  --shadow-xs: 0 1px 2px rgba(26, 66, 120, .05), 0 1px 3px -1px rgba(26, 66, 120, .07);
  --shadow-sm: 0 1px 2px rgba(26, 66, 120, .06), 0 4px 10px -6px rgba(26, 66, 120, .16);
  --shadow:    0 2px 4px rgba(26, 66, 120, .06), 0 12px 28px -16px rgba(26, 66, 120, .28);
  --shadow-lg: 0 4px 8px rgba(26, 66, 120, .07), 0 28px 56px -26px rgba(26, 66, 120, .32);

  /* A ring of the brand green, for the state that has to be noticed. */
  --ring-green: 0 0 0 4px rgba(113, 169, 48, .18);

  --container: 1200px;
  --container-narrow: 820px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}