/* Grind & Go — design tokens (fonts, colors, typography, layout/motion) */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* ---- Families ---- */
  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Comic Sans MS', cursive;

  /* ---- Weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- Type scale ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---- Cream / surfaces ---- */
  --cream-50:  #FDFBF4;
  --cream-100: #F8F1E1;
  --cream-200: #F1E7D1;
  --cream-300: #E7D8BC;
  --cream-400: #D8C4A0;

  /* ---- Coffee / espresso ---- */
  --espresso-900: #291710;
  --espresso-800: #3A2216;
  --coffee-700:   #4E2C19;
  --coffee-600:   #6F3D1E;
  --coffee-500:   #8A4B24;
  --coffee-400:   #A9683A;

  /* ---- Burnt orange (primary accent) ---- */
  --orange-700: #9E4415;
  --orange-600: #B85018;
  --orange-500: #CE5E1D;
  --orange-400: #E17A2C;
  --orange-300: #EE9A55;

  /* ---- Caramel / crema ---- */
  --caramel-500: #C89153;
  --caramel-400: #D6A566;
  --caramel-300: #E5C79A;
  --caramel-200: #F0DDBE;

  /* ---- Warm neutrals ---- */
  --warm-gray-600: #6B5D4F;
  --warm-gray-500: #877868;
  --warm-gray-400: #A99A88;
  --warm-gray-300: #C9BCA9;

  /* ---- Semantic status ---- */
  --green-500:  #4E7C4A;
  --green-100:  #E4EEDD;
  --amber-500:  #D89A2E;
  --amber-100:  #F6E9CB;
  --red-500:    #BF3B2B;
  --red-100:    #F4DAD4;

  --white: #FFFFFF;
  --black: #1B0F09;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--cream-100);
  --surface-card:    var(--cream-50);
  --surface-inverse: var(--espresso-900);

  --text-strong:    var(--espresso-900);
  --text-body:      var(--coffee-700);
  --text-muted:     var(--warm-gray-500);
  --text-inverse:   var(--cream-50);
  --text-accent:    var(--orange-600);
  --text-on-accent: var(--cream-50);

  --brand-primary:       var(--orange-500);
  --brand-primary-hover: var(--orange-400);
  --brand-primary-press: var(--orange-600);

  --border-subtle:  var(--cream-300);
  --border-default: var(--cream-400);
  --border-accent:  var(--orange-500);

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radii ---- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-pill:  999px;
  --radius-round: 50%;

  /* ---- Shadows (warm-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(59, 34, 22, 0.06);
  --shadow-sm: 0 2px 6px rgba(59, 34, 22, 0.08);
  --shadow-md: 0 6px 18px rgba(59, 34, 22, 0.10);
  --shadow-lg: 0 14px 36px rgba(59, 34, 22, 0.14);
  --shadow-xl: 0 24px 60px rgba(59, 34, 22, 0.18);
  --shadow-accent: 0 10px 24px rgba(206, 94, 29, 0.30);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-normal: 240ms;
  --dur-slow:   420ms;

  /* ---- Layout ---- */
  --container-lg: 1200px;
}