/* ============================================
   NUMI — Palette & Gradients
   Extracted from BiteWise/LiquidGlassDesignSystem.swift
   Values chosen so web matches the iOS app.
   ============================================ */

:root {

  /* ---- Brand accent (pink / coral) --------------------------- */
  /* Primary brand accent. Standard + high-contrast ramps so web
     pages can respect prefers-contrast the same way the app does. */
  --numi-pink:            #FF4A88;  /* standard brand pink */
  --numi-pink-hc-light:   #C4005C;  /* high-contrast on light bg */
  --numi-pink-hc-dark:    #FF73BF;  /* high-contrast on dark bg */
  --numi-coral:           #FF6161;  /* secondary warm pink */
  --numi-coral-deep:      #E64D24;  /* coral, light mode */
  --numi-coral-soft:      #FF7047;  /* coral, dark mode */
  --numi-orange-tail:     #FF7F42;  /* accent gradient tail stop */

  /* ---- Nutrition greens -------------------------------------- */
  --numi-green:           #2ECC70;  /* standard nutrition green */
  --numi-green-light:     #108F3F;  /* green, light mode HC */
  --numi-green-dark:      #59FF99;  /* green, dark mode HC */
  --numi-protein:         #4DBD72;  /* protein macro (dark) */
  --numi-protein-deep:    #2E8A4A;  /* protein macro (light) */

  /* ---- Blues ------------------------------------------------- */
  --numi-blue:            #3D8CFF;  /* info / water (dark bg) */
  --numi-blue-deep:       #1A6BEF;  /* info / water (light bg) */
  --numi-fat:             #6495E8;  /* fat macro (dark) */
  --numi-fat-deep:        #3D6DC4;  /* fat macro (light) */
  --numi-indigo:          #6B85FF;  /* premium / focus (dark) */
  --numi-indigo-deep:     #4D2EE0;  /* premium / focus (light) */

  /* ---- Supporting hues --------------------------------------- */
  --numi-purple:          #9C70FF;  /* decorative violet (dark) */
  --numi-purple-deep:     #7A42EB;  /* decorative violet (light) */
  --numi-teal:            #1ECCB8;  /* mint / refresh (dark) */
  --numi-teal-deep:       #009E8F;  /* mint / refresh (light) */
  --numi-amber:           #FFB81F;  /* carbs / warmth (dark) */
  --numi-amber-deep:      #D68F03;  /* carbs / warmth (light) */
  --numi-carbs:           #F5C233;  /* carbs macro (dark) */
  --numi-carbs-deep:      #C48F10;  /* carbs macro (light) */
  --numi-grain:           #C4946B;  /* sage / grain (dark) */
  --numi-grain-deep:      #8C5E3D;  /* sage / grain (light) */

  /* ---- Semantic (iOS system colours, for meaning) ------------ */
  --numi-negative:        #FF3B30;  /* error, destructive */
  --numi-warning:         #FF9500;  /* caution, attention */
  --numi-positive:        #34C759;  /* success */
  --numi-positive-mint:   #00C7BE;  /* secondary positive */
  --numi-attention:       #FFCC00;  /* highlight */
  --numi-info:            #32ADE6;  /* info (systemCyan) */
  --numi-streak:          #FF2D55;  /* streak / energy */

  /* ---- Canvas (page background) ------------------------------ */
  /* Light mode: warm pink → peach → near-white → white.
     Dark mode:  warm-purple charcoal → near-black. */
  --numi-canvas-top-light:    #FAD4DE;
  --numi-canvas-mid1-light:   #FDEBDE;
  --numi-canvas-mid2-light:   #FFF3F5;
  --numi-canvas-bottom-light: #FFFFFF;

  --numi-canvas-top-dark:     #1A0A21;
  --numi-canvas-mid1-dark:    #120817;
  --numi-canvas-mid2-dark:    #0A030F;
  --numi-canvas-bottom-dark:  #050308;

  /* ---- Neutral text ramp (light mode) ------------------------ */
  --numi-ink-1:  rgba(0, 0, 0, 0.92);  /* primary text   ~#111 */
  --numi-ink-2:  rgba(0, 0, 0, 0.62);  /* secondary text */
  --numi-ink-3:  rgba(0, 0, 0, 0.45);  /* tertiary text */
  --numi-ink-4:  rgba(0, 0, 0, 0.28);  /* faint / disabled */

  /* ---- Neutral text ramp (dark mode) ------------------------- */
  --numi-snow-1: rgba(255, 255, 255, 1.00);  /* primary */
  --numi-snow-2: rgba(255, 255, 255, 0.55);  /* secondary */
  --numi-snow-3: rgba(255, 255, 255, 0.28);  /* tertiary */
  --numi-snow-4: rgba(255, 255, 255, 0.10);  /* ghost */

  /* ---- Glass surface tokens ---------------------------------- */
  --numi-glass-surface-light: rgba(255, 255, 255, 0.60);
  --numi-glass-surface-dark:  rgba(255, 255, 255, 0.07);
  --numi-glass-border-light:  rgba(0, 0, 0, 0.06);
  --numi-glass-border-dark:   rgba(255, 255, 255, 0.11);


  /* ============================================================
     GRADIENTS
     ============================================================ */

  /* Primary brand gradient — pink → coral → orange.
     Use for CTAs, hero text gradient, call-outs. */
  --grad-brand: linear-gradient(135deg,
    #FF4A88 0%,
    #FF6161 55%,
    #FF7F42 100%);

  /* Brand gradient with inner highlight — matches app's primary
     button. Layer a soft white + warm-glow radial on top of the
     linear, exactly like the iOS accent CTA. */
  --grad-brand-cta:
    radial-gradient(ellipse 80% 120% at 0% 0%,     rgba(255, 255, 255, 0.18), transparent 50%),
    radial-gradient(ellipse 80% 120% at 100% 100%, rgba(255, 127, 66, 0.35),  transparent 55%),
    linear-gradient(135deg, #FF4A88 0%, #FF6161 55%, #FF7F42 100%);

  /* Soft pink halo — decorative glow behind imagery. */
  --grad-pink-halo: radial-gradient(circle at center,
    rgba(255, 74, 136, 0.28) 0%,
    rgba(255, 74, 136, 0.10) 35%,
    transparent 70%);

  /* Canvas — light mode page background (pink → peach → white). */
  --grad-canvas-light: linear-gradient(180deg,
    #FAD4DE 0%,
    #FDEBDE 35%,
    #FFF3F5 70%,
    #FFFFFF 100%);

  /* Canvas — dark mode page background (warm-purple → near-black). */
  --grad-canvas-dark: linear-gradient(180deg,
    #1A0A21 0%,
    #120817 35%,
    #0A030F 70%,
    #050308 100%);

  /* Aurora — rotating angular gradient, used sparingly for premium
     flourishes. Use `conic-gradient` for the web equivalent of the
     app's AngularGradient. */
  --grad-aurora: conic-gradient(from 0deg at 50% 50%,
    #FF4A88,  /* accent pink */
    #9C70FF,  /* violet */
    #2ECC70,  /* green */
    #FF4A88); /* back to pink */

  /* Nutrition / health — green ramp for positive, progress, "good". */
  --grad-nutrition: linear-gradient(135deg,
    #2ECC70 0%,
    #4DBD72 60%,
    #1ECCB8 100%);

  /* Cool — blue → indigo → violet. Focus, deep-work, premium. */
  --grad-cool: linear-gradient(135deg,
    #3D8CFF 0%,
    #6B85FF 55%,
    #9C70FF 100%);

  /* Warm — amber → coral → pink. Energy, streaks, mornings. */
  --grad-warm: linear-gradient(135deg,
    #FFB81F 0%,
    #FF6161 50%,
    #FF4A88 100%);

  /* Macro chips — distinct gradient per macronutrient. */
  --grad-macro-protein: linear-gradient(135deg, #4DBD72, #1ECCB8);
  --grad-macro-carbs:   linear-gradient(135deg, #F5C233, #FFB81F);
  --grad-macro-fat:     linear-gradient(135deg, #6495E8, #6B85FF);

  /* Hero image scrim — fades an image into a dark card below.
     Apply as a ::after overlay on top of hero imagery. */
  --grad-hero-scrim-dark: linear-gradient(180deg,
    rgba(0, 0, 0, 0.00) 0%,
    rgba(0, 0, 0, 0.40) 35%,
    rgba(0, 0, 0, 0.80) 75%,
    rgba(0, 0, 0, 1.00) 100%);

  /* Hero image scrim — fades an image into a light background. */
  --grad-hero-scrim-light: linear-gradient(180deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.40) 40%,
    rgba(255, 255, 255, 0.95) 100%);

  /* Section divider — horizontal accent rule, fades at edges. */
  --grad-divider-accent: linear-gradient(90deg,
    transparent 0%,
    #FF4A88    50%,
    transparent 100%);
}


/* ============================================
   DARK MODE SWAPS
   Re-bind canvas + glass tokens when user prefers dark.
   Everything else (brand, macro, semantic) is already
   tuned to work on both backgrounds.
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --grad-canvas:         var(--grad-canvas-dark);
    --numi-glass-surface:  var(--numi-glass-surface-dark);
    --numi-glass-border:   var(--numi-glass-border-dark);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --grad-canvas:         var(--grad-canvas-light);
    --numi-glass-surface:  var(--numi-glass-surface-light);
    --numi-glass-border:   var(--numi-glass-border-light);
  }
}