/* 01-tokens.css — design tokens (custom properties), themes, contrast
   Merged from the v1 base layer + the former design-system layer.
   Loaded first so all later layers can reference these variables. */

:root {
  /* Brand colours — overridden at runtime by ThemeColor model */
  --primary:        #1B5E3B;
  --primary-light:  #2e7d52;
  --primary-dark:   #0d3d25;
  --primary-50:     #e8f5ee;
  --primary-100:    #c8e6d5;

  --secondary:      #c05920;
  --secondary-light:#d47030;
  --secondary-dark: #9a4210;

  --accent:         #d08b00;
  --accent-light:   #e8a820;
  --accent-dark:    #a86a00;

  /* Neutral palette */
  --bg:             #f7f4ef;
  --surface:        #FFFFFF;
  --surface-2:      #F4F6F3;
  --surface-3:      #E8EDE6;
  --border:         #DDE3DA;
  --border-light:   #EEF1EC;

  /* Text */
  --text:           #1c1610;
  --text-muted:     #5c4e3c;
  --text-light:     #8a7a6a;
  --text-on-primary:#ffffff;
  --text-on-accent: #FFFFFF;

  /* Status colours */
  --success:  #2E7D32;
  --warning:  #E65100;
  --info:     #0277BD;
  --error:    #C62828;

  /* Spacing — 4pt grid */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* Typography — MD3 type scale */
  --font-base:       'Poppins', system-ui, -apple-system, sans-serif;
  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   1.1875rem;  /* 19px */
  --fs-xl:   1.375rem;   /* 22px */
  --fs-2xl:  1.625rem;   /* 26px */
  --fs-3xl:  2rem;       /* 32px */
  --fs-4xl:  2.375rem;   /* 38px */
  --fs-5xl:  3rem;       /* 48px */
  --fs-6xl:  3.75rem;    /* 60px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:  1.2;
  --lh-snug:   1.375;
  --lh-normal: 1.5;
  --lh-relaxed:1.625;
  --lh-loose:  2;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  /* Shadows — elevation system */
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.08);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.08);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.08);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.08);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 400ms cubic-bezier(.34,1.56,.64,1);

  /* Z-index stack */
  --z-below:  -1;
  --z-base:    0;
  --z-above:   1;
  --z-sticky:  100;
  --z-fixed:   200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;

  /* Layout */
  --container-max: 1280px;
  --navbar-h:      64px;
}

:root {
  --font-serif:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-condensed: 'Oswald', 'Barlow Condensed', system-ui, sans-serif;
  --jungle-dark:    #001F12;  /* deep forest — category strip bg */
  --jungle-mid:     #003320;  /* hover state on dark sections */
  --ivory:          #F7F3ED;  /* warm off-white body tone */
}

:root {
  --display-font: 'Fraunces', 'Playfair Display', Georgia, serif;
  --section-pad-y: clamp(3rem, 6vw, 6rem);
  --section-pad-y-tight: clamp(2rem, 4vw, 3.5rem);
  --grid-gap-lg: clamp(1.25rem, 2vw, 2rem);
  --grid-gap-md: clamp(1rem, 1.5vw, 1.5rem);
  --content-max: 1200px;
  --content-narrow: 880px;
  --card-radius: 18px;
  --photo-overlay: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  --hover-lift: translateY(-4px);
}