/* ============================================================
   More Life Network — Design Tokens (V2.0)
   Cinematic Orange & Teal · Kodak Vision3 Reference
   Drop-in CSS custom properties. Import once at :root.
   ============================================================ */

:root {
  /* ---- Brand / Accent ---- */
  --mln-orange:        #F97316;  /* primary brand accent */
  --mln-orange-light:  #FB923C;  /* gradient / glow step */
  --mln-teal:          #0D9488;  /* secondary accent */
  --mln-teal-mid:      #14B8A6;  /* gradient / highlight */
  --mln-teal-light:    #5EEAD4;  /* subtle tints only */

  /* ---- Neutrals / Surface ---- */
  --mln-black:         #080808;  /* background — always */
  --mln-surface-1:     #111111;  /* cards / panels */
  --mln-surface-2:     #181818;  /* elevated surfaces */
  --mln-surface-3:     #222222;  /* spec / code blocks */

  /* ---- Text ---- */
  --mln-text-1:        #FFFFFF;                  /* primary headlines */
  --mln-text-2:        rgba(255,255,255,0.58);   /* subheadlines */
  --mln-text-3:        rgba(255,255,255,0.32);   /* captions / meta */
  --mln-text-strong:   rgba(255,255,255,0.80);   /* benefit chip text */

  /* ---- Borders ---- */
  --mln-border-1:      rgba(255,255,255,0.07);   /* all card borders */
  --mln-border-2:      rgba(255,255,255,0.13);   /* emphasised borders */

  /* ---- Semantic (do/don't states) ---- */
  --mln-success:       #2DD4BF;
  --mln-danger:        #F87171;

  /* ---- Typography ---- */
  --mln-font: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mln-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --mln-fw-regular: 400;
  --mln-fw-medium:  600;
  --mln-fw-bold:    700;
  --mln-fw-heavy:   800;
  --mln-fw-black:   900;

  /* ---- Radius ---- */
  --mln-radius-pill:  100px;
  --mln-radius-lg:    16px;
  --mln-radius-md:    12px;
  --mln-radius-sm:    8px;
  --mln-radius-xs:    7px;

  /* ---- Brand accent tints (for fills/borders on accent UI) ---- */
  --mln-orange-fill:   rgba(249,115,22,0.13);
  --mln-orange-border: rgba(249,115,22,0.40);
  --mln-teal-fill:     rgba(13,148,136,0.13);
  --mln-teal-border:   rgba(13,148,136,0.30);

  /* ---- Signature gradients ---- */
  --mln-gradient-bar: linear-gradient(90deg,#F97316,#FB923C,#14B8A6,#0D9488,transparent);
  --mln-gradient-accent-orange: linear-gradient(180deg,transparent,rgba(249,115,22,.75),rgba(249,115,22,.9),rgba(249,115,22,.75),transparent);
  --mln-gradient-accent-teal: linear-gradient(180deg,transparent,rgba(13,148,136,.75),rgba(20,184,166,.9),rgba(13,148,136,.75),transparent);

  /* ---- Photo overlay layers (cinematic treatment) ---- */
  --mln-ov-left-panel:    linear-gradient(105deg,rgba(6,6,6,.82) 0%,rgba(6,6,6,.70) 28%,rgba(6,6,6,.30) 52%,transparent 68%);
  --mln-ov-bottom:        linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 45%);
  --mln-ov-top:           linear-gradient(to bottom,rgba(0,0,0,.40) 0%,transparent 30%);
  --mln-ov-kodak-warm:    rgba(180,70,0,0.08);
  --mln-ov-teal-shadow:   rgba(13,148,136,0.06);
}