/* ==========================================================================
   Himparadise — Design tokens
   Single source of truth for colour, type, spacing, radius, shadow and motion.
   Values mirror the approved design package (README design tokens + markup).
   ========================================================================== */

:root {
  /* ---- Colour: ink & text ---- */
  --hp-ink: #0E1B24;          /* primary text, dark buttons */
  --hp-text-2: #33434D;       /* secondary text */
  --hp-muted: #5A6872;        /* muted text */

  /* ---- Colour: surfaces & lines ---- */
  --hp-bg: #F3F6F7;           /* page background */
  --hp-surface: #F7F9F9;      /* soft surface */
  --hp-white: #FFFFFF;
  --hp-divider: #D5DFE4;
  --hp-line-08: rgba(14, 27, 36, .08);
  --hp-line-12: rgba(14, 27, 36, .12);
  --hp-line-16: rgba(14, 27, 36, .16);

  /* ---- Colour: saffron accent ---- */
  --hp-saffron: #FF9F1C;
  --hp-saffron-l: #FFB44D;
  --hp-saffron-ll: #FFC266;
  --hp-saffron-tint: #FFF1DC;
  --hp-saffron-ink: #7A4100;
  --hp-saffron-ink-2: #9A5200;

  /* ---- Colour: pink (hero accent) ---- */
  --hp-pink: #C2185B;

  /* ---- Colour: forest green (success, green season) ---- */
  --hp-green: #0F7A50;
  --hp-green-d: #0B6142;
  --hp-green-l: #5BD49A;
  --hp-green-tint: #E3F4EC;

  /* ---- Colour: link / danger / whatsapp ---- */
  --hp-link: #1C5FD4;
  --hp-danger: #B3261E;
  --hp-danger-d: #8A1C1C;
  --hp-danger-tint: #FBEFEF;
  --hp-danger-tint-2: #F3E3E3;
  --hp-whatsapp: #25D366;
  --hp-whatsapp-ink: #06210F;

  /* Season shading (calendar) */
  --hp-peak-tint: var(--hp-saffron-tint);
  --hp-peak-ink: var(--hp-saffron-ink);
  --hp-green-season-tint: var(--hp-green-tint);
  --hp-green-season-ink: var(--hp-green-d);

  /* ---- Typography ---- */
  --hp-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --hp-font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hp-tracking-display: -0.02em;

  --hp-fs-label: 0.75rem;      /* 12px (11–12.5) */
  --hp-fs-ui: 0.9375rem;       /* 15px (13–15) */
  --hp-fs-body: 0.9375rem;
  --hp-fs-lead: 1.0625rem;     /* 17px (16–18) */
  --hp-fs-card-title: 1.375rem;/* 22px (20–26) */
  --hp-fs-h2: clamp(26px, 3vw, 36px);
  --hp-fs-h1: clamp(36px, 5.2vw, 68px);

  --hp-lh-tight: 1.1;
  --hp-lh-snug: 1.25;
  --hp-lh-body: 1.55;

  /* ---- Radius ---- */
  --hp-r-input: 11px;   /* 9–12 inputs/buttons/chips */
  --hp-r-card: 16px;    /* 14–18 cards */
  --hp-r-panel: 22px;   /* 20–24 large panels/modals */
  --hp-r-pill: 999px;

  /* ---- Shadow ---- */
  --hp-shadow-card: 0 0 0 1px rgba(14, 27, 36, .08), 0 30px 60px -30px rgba(14, 27, 36, .35);
  --hp-shadow-card-hover: 0 0 0 1px rgba(14, 27, 36, .10), 0 40px 70px -28px rgba(14, 27, 36, .42);
  --hp-shadow-sm: 0 1px 2px rgba(14, 27, 36, .06), 0 6px 16px -8px rgba(14, 27, 36, .18);
  --hp-shadow-pop: 0 20px 50px -12px rgba(14, 27, 36, .35);

  /* ---- Spacing scale ---- */
  --hp-sp-1: 4px;
  --hp-sp-2: 8px;
  --hp-sp-3: 12px;
  --hp-sp-4: 16px;
  --hp-sp-5: 20px;
  --hp-sp-6: 24px;
  --hp-sp-8: 32px;
  --hp-sp-10: 40px;
  --hp-sp-12: 48px;
  --hp-sp-16: 64px;
  --hp-sp-20: 80px;

  /* ---- Layout ---- */
  --hp-container: 1200px;
  --hp-container-wide: 1320px;
  --hp-gutter: 16px;
  --hp-header-h: 72px;
  --hp-abar: 0px; /* WordPress admin-bar height offset (set on body.admin-bar) */

  /* ---- Motion ---- */
  --hp-ease: cubic-bezier(.2, .6, .2, 1);
  --hp-t-fast: .18s var(--hp-ease);
  --hp-t: .24s var(--hp-ease);
  --hp-t-slow: .32s var(--hp-ease);

  --hp-z-header: 500;
  --hp-z-sheet: 200;
  --hp-z-modal: 300;
  --hp-z-popup: 400;
  --hp-z-toast: 500;
}