/* ============================================================
   Design Tokens — Buddha Meditation Center New York
   Mahamevnawa Buddhist Monastery · New York Branch
   Keep in sync with wordpress-theme/assets/css/tokens.css
   ============================================================ */

:root {
  /* ── Raw colours — Base ─────────────────────────────────── */
  --color-white:          hsl(0, 0%, 96.08%);        /* #F5F5F5 off-white bg */
  --color-black:          hsl(0, 0%, 7.06%);          /* #121212 near-black   */

  /* ── Brand — Terracotta / Saffron ────────────────────────── */
  --color-accent:         hsl(1.94, 38.59%, 47.25%);  /* #A84E4A warm terracotta */
  --color-accent-light:   hsl(33.33, 17.65%, 90%);    /* #EDE6DF warm parchment  */
  --color-accent-hover:   hsl(1.94, 42%, 42%);         /* darker terracotta hover */

  /* ── Sage Green — muted forest tone ─────────────────────── */
  --color-sage:           hsl(106.15, 5.31%, 51.96%); /* #818A7E muted sage    */
  --color-sage-light:     hsl(106, 8%, 92%);           /* pale sage tint       */
  --color-sage-dark:      hsl(106, 7%, 38%);           /* deep sage, text use  */
  --color-sage-surface:   hsl(106, 6%, 96%);           /* sage-tinted bg       */

  /* ── Neutrals (warm undertone) ───────────────────────────── */
  --color-neutral-50:  hsl(30, 10%, 97%);
  --color-neutral-100: hsl(30, 8%, 93%);
  --color-neutral-200: hsl(30, 6%, 87%);
  --color-neutral-300: hsl(30, 5%, 75%);
  --color-neutral-400: hsl(30, 4%, 60%);
  --color-neutral-500: hsl(30, 3%, 48%);
  --color-neutral-600: hsl(30, 4%, 36%);
  --color-neutral-700: hsl(30, 5%, 25%);
  --color-neutral-800: hsl(30, 6%, 16%);
  --color-neutral-900: hsl(30, 7%, 9%);

  /* ── Surfaces ────────────────────────────────────────────── */
  --color-surface:        var(--color-white);
  --color-surface-raised: hsl(30, 10%, 98.5%);
  --color-border:         var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);

  /* ── Semantic text ───────────────────────────────────────── */
  --color-text-primary:   var(--color-black);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-disabled:  var(--color-neutral-400);
  --color-text-inverse:   var(--color-white);
  --color-text-accent:    var(--color-accent);

  /* ── Semantic secondary (sage green) ────────────────────── */
  --color-secondary:         var(--color-sage);           /* hsl(106.15,5.31%,51.96%) */
  --color-secondary-light:   var(--color-sage-light);
  --color-secondary-dark:    var(--color-sage-dark);
  --color-secondary-surface: var(--color-sage-surface);

  /* ── Status ──────────────────────────────────────────────── */
  --color-success: hsl(140, 40%, 45%);
  --color-warning: hsl(38, 80%, 55%);
  --color-error:   hsl(4, 65%, 50%);
  --color-info:    hsl(210, 55%, 50%);

  /* ── Spacing scale ───────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-narrow: 720px;
  --grid-gutter:      var(--space-6);
  --nav-height:       72px;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.5rem;   /*  8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:     0 1px 2px hsla(0,0%,0%,0.04);
  --shadow-sm:     0 1px 3px hsla(0,0%,0%,0.07), 0 1px 2px hsla(0,0%,0%,0.05);
  --shadow-md:     0 4px 12px hsla(0,0%,0%,0.08), 0 2px 4px hsla(0,0%,0%,0.05);
  --shadow-lg:     0 10px 24px hsla(0,0%,0%,0.09), 0 4px 8px hsla(0,0%,0%,0.05);
  --shadow-xl:     0 20px 40px hsla(0,0%,0%,0.10);
  --shadow-2xl:    0 25px 50px hsla(0,0%,0%,0.12);
  --shadow-accent: 0 4px 20px hsla(1.94, 38.59%, 47.25%, 0.28);

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-base:   1;
  --z-nav:    100;
  --z-mobile: 99;
  --z-modal:  1000;
  --z-toast:  2000;

  /* ── Breakpoints (reference; CSS uses @media directly) ────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}