/* ============================================================
   Vibrant Hope Nutrition — Design tokens

   Copied from the design system at
   vibrant-hope-nutrition-design/site/tokens/. Names and values are
   kept identical to the source so the two stay diffable — if a token
   changes there, change it here and nowhere else.

   What is NOT copied, and why:
     tokens/typography.css — the design system sets Newsreader/Nunito
       Sans on a clamp() scale. This theme is Fira Sans on the vw zoom
       model (see html{font-size} in style.css), where every rem already
       scales with the viewport. A clamp() scale would scale twice.
     tokens/fonts.css      — same reason.
     The fluid layout tokens from tokens/spacing.css (--section-y,
       --gutter, --container) — also clamp()-based, same conflict.

   Colour, radius, shadow and motion carry over unchanged: none of them
   depend on the type scale.
   ============================================================ */

:root {
  /* --- Brand base palette (confirmed) --- */
  --vh-white:        #ffffff;
  --vh-green:        #3bb498; /* signature vibrant green — primary action */
  --vh-blue:         #618aaf; /* muted steel blue */
  --vh-teal:         #68beb0; /* soft healing teal */
  --vh-periwinkle:   #a0b1cf; /* light periwinkle — soft accents, borders */
  --vh-violet:       #7173b8; /* dusty violet */
  --vh-indigo:       #6780b2; /* blue-violet */
  --vh-purple:       #836dc2; /* hopeful purple — secondary action */

  /* --- Tint / shade steps (derived via oklch, harmonized) --- */
  --vh-green-700:    oklch(0.58 0.11 168);
  --vh-green-600:    oklch(0.66 0.115 168);
  --vh-green-500:    #3bb498;
  --vh-green-100:    oklch(0.95 0.035 168);
  --vh-green-50:     oklch(0.975 0.018 168);

  --vh-purple-700:   oklch(0.50 0.13 292);
  --vh-purple-600:   oklch(0.58 0.13 292);
  --vh-purple-500:   #836dc2;
  --vh-purple-100:   oklch(0.94 0.04 292);
  --vh-purple-50:    oklch(0.975 0.02 292);

  --vh-blue-700:     oklch(0.50 0.075 249);
  --vh-blue-600:     oklch(0.555 0.070 249);
  --vh-blue-500:     #618aaf;
  --vh-blue-100:     oklch(0.94 0.03 250);

  --vh-teal-100:     oklch(0.95 0.035 190);
  --vh-periwinkle-100: oklch(0.95 0.025 270);

  /* --- Warm neutrals (harmonized cool-neutral to sit with the palette) --- */
  --vh-ink:          oklch(0.30 0.03 260);  /* deep slate — primary text */
  --vh-slate:        oklch(0.46 0.03 260);  /* body text */
  --vh-slate-soft:   oklch(0.60 0.025 260); /* secondary text */
  --vh-line:         oklch(0.90 0.015 260); /* hairline borders */
  --vh-line-soft:    oklch(0.945 0.012 260);
  --vh-cloud:        oklch(0.975 0.008 260); /* off-white surface */
  --vh-mist:         oklch(0.965 0.012 250); /* tinted section band */

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-bg:            var(--vh-white);
  --color-bg-alt:        var(--vh-cloud);
  --color-bg-tint:       var(--vh-green-50);
  --color-surface:       var(--vh-white);
  --color-surface-mist:  var(--vh-mist);

  --text-strong:         var(--vh-ink);
  --text-body:           var(--vh-slate);
  --text-muted:          var(--vh-slate-soft);
  --text-on-brand:       var(--vh-white);
  --text-link:           var(--vh-green-700);

  /* Primary action is the steel blue, not the green: the buttons were asked
     to match the blue already used on the package card titles. */
  --color-primary:       var(--vh-blue-500);
  --color-primary-hover: var(--vh-blue-600);
  --color-primary-press: var(--vh-blue-700);
  --color-secondary:     var(--vh-purple);
  --color-secondary-hover: var(--vh-purple-600);
  --color-accent-teal:   var(--vh-teal);
  --color-accent-blue:   var(--vh-blue);
  --color-accent-peri:   var(--vh-periwinkle);

  --border-subtle:       var(--vh-line);
  --border-soft:         var(--vh-line-soft);
  --border-brand:        var(--vh-periwinkle);

  /* Focus ring */
  --focus-ring:          oklch(0.555 0.070 249 / 0.45);

  /* --- Radii — soft, rounded, friendly wellness brand ---
     Same steps as the design system, restated in rem. The source is in px,
     which under the zoom model would hold a fixed corner while the card it
     sits on scaled away from it. The rem values below are the px values at
     the 16px base, so at 100% zoom the two render identically. */
  --radius-sm: 0.5rem;    /* 8px  */
  --radius-md: 0.875rem;  /* 14px */
  --radius-lg: 1.5rem;    /* 24px */
  --radius-xl: 2.25rem;   /* 36px */
  --radius-pill: 999px;

  /* --- Shadows — soft, diffuse, low-contrast (calm, airy) --- */
  --shadow-xs: 0 1px 2px oklch(0.4 0.03 260 / 0.06);
  --shadow-sm: 0 2px 8px oklch(0.4 0.03 260 / 0.07);
  --shadow-md: 0 10px 30px oklch(0.45 0.04 260 / 0.10);
  --shadow-lg: 0 24px 60px oklch(0.45 0.05 260 / 0.14);
  --shadow-brand: 0 14px 34px oklch(0.615 0.062 249 / 0.28); /* blue glow on CTAs */

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}