/* ============================================================
   IFFI — Indian Frozen Food Institute · Brand Tokens v1
   Premium & global. Cold-chain story leads. Minimal motif.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color · Core ---------- */
  --iffi-navy:          #0B2240;  /* Deep Freeze — primary brand */
  --iffi-navy-800:      #132E54;  /* hover / layered panels      */
  --iffi-navy-900:      #081A33;  /* footer / darkest            */
  --iffi-ink:           #121821;  /* body text on light          */
  --iffi-slate:         #46566B;  /* secondary text on light     */
  --iffi-mist:          #8CA0B8;  /* tertiary / captions on dark */

  /* ---------- Color · Surfaces ---------- */
  --iffi-frost:         #F9FBFD;  /* page background             */
  --iffi-ice:           #EDF2F7;  /* alt sections / cards        */
  --iffi-ice-deep:      #DDE7F0;  /* borders-as-fill, hairlines  */
  --iffi-white:         #FFFFFF;

  /* ---------- Color · Accents ---------- */
  --iffi-glacial:       #2E6FB8;  /* links, active, charts       */
  --iffi-glacial-soft:  #BBD3EA;  /* tints on light              */
  --iffi-saffron:       #E8862E;  /* THE accent — use sparingly  */
  --iffi-saffron-deep:  #C96A14;  /* saffron on light text-safe  */

  /* ---------- Color · v2 Accents · Indicold blue + Fresh green ---------- */
  --iffi-indicold:      #00A7E1;  /* Indicold blue — cold-chain voice */
  --iffi-indicold-deep: #007FAC;  /* indicold on light, text-safe     */
  --iffi-indicold-soft: #9FDDF3;  /* tints on light                   */
  --iffi-indicold-glow: #56C7EE;  /* indicold on dark surfaces        */
  --iffi-fresh:         #3FA571;  /* fresh green — freshness story    */
  --iffi-fresh-deep:    #2C7F53;  /* fresh on light, text-safe        */
  --iffi-fresh-soft:    #C4E6D3;  /* tints on light                   */

  /* ---------- Type ---------- */
  --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, serif;
  --font-mono:    'Spline Sans Mono', 'SF Mono', monospace;

  /* Type scale (1.25 maj third, desktop) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --tracking-tight: -0.035em;  /* display headlines  */
  --tracking-snug:  -0.015em;  /* subheads           */
  --tracking-caps:   0.14em;   /* mono eyebrows/tags */

  /* ---------- Space (8px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- Shape & elevation ---------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(11,34,64,.06), 0 8px 24px -8px rgba(11,34,64,.10);
  --shadow-pop:  0 2px 6px rgba(11,34,64,.10), 0 20px 48px -12px rgba(11,34,64,.22);
  --hairline: 1px solid var(--iffi-ice-deep);
  --hairline-dark: 1px solid rgba(255,255,255,.14);
}

/* ============ Base ============ */
.iffi {
  font-family: var(--font-body);
  color: var(--iffi-ink);
  background: var(--iffi-frost);
  -webkit-font-smoothing: antialiased;
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ============ Eyebrow / mono tag ============ */
.iffi-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--iffi-glacial);
}
.iffi-eyebrow--saffron { color: var(--iffi-saffron-deep); }
.iffi-eyebrow--ondark  { color: var(--iffi-mist); }

/* ============ Buttons ============ */
.iffi-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.iffi-btn--primary { background: var(--iffi-navy); color: #fff; }
.iffi-btn--primary:hover { background: var(--iffi-navy-800); }
.iffi-btn--saffron { background: var(--iffi-saffron); color: #fff; }
.iffi-btn--saffron:hover { background: var(--iffi-saffron-deep); }
.iffi-btn--fresh { background: var(--iffi-fresh-deep); color: #fff; }
.iffi-btn--fresh:hover { background: #226742; }
.iffi-btn--indicold { background: var(--iffi-indicold-deep); color: #fff; }
.iffi-btn--indicold:hover { background: #00688D; }
.iffi-btn--ghost {
  background: transparent; color: var(--iffi-navy);
  border-color: var(--iffi-ice-deep);
}
.iffi-btn--ghost:hover { border-color: var(--iffi-navy); }
.iffi-btn--ghost-dark {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.28);
}
.iffi-btn--ghost-dark:hover { border-color: #fff; }
.iffi-btn .arr { font-family: var(--font-mono); font-weight: 400; }

/* ============ Frost mark (the brand glyph) ============
   Six hairline strokes — an ice crystal. Use .fm-* sizes. */
.frost-mark { display: inline-block; vertical-align: middle; }

/* ============ Stat block ============ */
.iffi-stat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}
.iffi-stat .lbl {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iffi-slate);
  margin-top: 8px;
}

/* ============ Card ============ */
.iffi-card {
  background: var(--iffi-white);
  border: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ============ Temperature chip — brand device ============ */
.temp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1px solid var(--iffi-glacial-soft);
  border-radius: 999px;
  color: var(--iffi-glacial);
  background: rgba(46,111,184,.05);
}
.temp-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--iffi-glacial); }
.temp-chip--dark { border-color: rgba(255,255,255,.22); color: #BBD3EA; background: rgba(255,255,255,.05); }
.temp-chip--indicold { border-color: rgba(0,167,225,.45); color: var(--iffi-indicold-deep); background: rgba(0,167,225,.07); }
.temp-chip--indicold .dot { background: var(--iffi-indicold); }
.temp-chip--indicold.temp-chip--dark { color: var(--iffi-indicold-glow); border-color: rgba(86,199,238,.4); background: rgba(0,167,225,.10); }
.temp-chip--fresh { border-color: rgba(63,165,113,.45); color: var(--iffi-fresh-deep); background: rgba(63,165,113,.07); }
.temp-chip--fresh .dot { background: var(--iffi-fresh); }

/* ============ Wordmark letters — I·F·F·I ============
   Reverted to monochrome (set colors here to re-enable
   Frozen-blue / Fresh-green letter accents) */
.f-frz { color: inherit; }
.f-frs { color: inherit; }