/* ==========================================================================
   January Design System — Colors & Type
   The editorial foundation. Warm neutrals, garnet primary, serif/sans pair.
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */

@font-face {
  font-family: 'January Serif';
  src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Serif';
  src: url('fonts/PlayfairDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Serif';
  src: url('fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Serif';
  src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Serif';
  src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'January Serif';
  src: url('fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'January Sans';
  src: url('fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Sans';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Sans';
  src: url('fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Sans';
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Sans';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'January Sans';
  src: url('fonts/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== Brand palette ================================================== */
  /* Garnet — the core brand color, deep and clinical, not pink */
  --jn-garnet:        #71274E;  /* primary */
  --jn-garnet-deep:   #5A1F3E;  /* hover / pressed */
  --jn-garnet-ink:    #3A061E;  /* darkest — nav, heading emphasis */
  --jn-garnet-tint:   #EAE5F7;  /* dusty lilac wash — surfaces */
  --jn-garnet-wash:   #F5EBF1;  /* lightest lilac — cell highlights */

  /* Supporting — used sparingly, only in data viz / editorial accent */
  --jn-ink-blue:      #2A33B0;  /* ink-link, secondary accent */
  --jn-moss:          #2C5F4A;  /* "approved" / safe status */
  --jn-amber:         #8A4A0D;  /* "nursing" / caution */
  --jn-clay:          #8A1A5C;  /* partner / warm secondary */
  --jn-slate:         #1B5A8A;  /* data-viz blue */
  --jn-citron:        #DFFF11;  /* legacy-v1 accent — editorial highlights only */

  /* ===== Neutrals — warm off-white system ============================== */
  --jn-bg:            #FAF9F7;  /* page background, warm paper */
  --jn-surface:       #FFFFFF;  /* cards, menus */
  --jn-surface-2:     #F4F2EF;  /* secondary surface, inputs, chips */
  --jn-border:        #E8E4DF;  /* hairline */
  --jn-border-strong: #D6D0C8;

  --jn-ink:           #1A1714;  /* body text, near-black but warm */
  --jn-ink-2:         #6B6560;  /* secondary text */
  --jn-ink-3:         #9C978F;  /* tertiary / labels / meta */
  --jn-ink-4:         #C4BDB4;  /* disabled / placeholders */

  /* Semantic foregrounds */
  --jn-fg:            var(--jn-ink);
  --jn-fg-muted:      var(--jn-ink-2);
  --jn-fg-subtle:     var(--jn-ink-3);
  --jn-fg-on-garnet:  #FFFFFF;

  /* Semantic status (used in symptom tracker + content library) */
  --jn-status-ok:     #2E7D32;
  --jn-status-ok-bg:  #E8F5E9;
  --jn-status-warn:   #B45309;
  --jn-status-warn-bg:#FFF9E6;
  --jn-status-risk:   #C62828;
  --jn-status-risk-bg:#FFEBEE;

  /* ===== Type ========================================================== */
  --jn-serif:  'January Serif', 'Playfair Display', Georgia, serif; /* @kind font */
  --jn-sans:   'January Sans', 'Montserrat', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */
  --jn-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* @kind font */

  /* Display & editorial — Playfair, set tight */
  --jn-font-display: 400 clamp(40px, 6vw, 72px)/1.05 var(--jn-serif);
  --jn-font-h1:      500 clamp(32px, 4vw, 48px)/1.1  var(--jn-serif);
  --jn-font-h2:      500 clamp(24px, 3vw, 34px)/1.18 var(--jn-serif);
  --jn-font-h3:      500 20px/1.25 var(--jn-serif);
  --jn-font-eyebrow: 500 12px/1 var(--jn-sans);  /* uppercase, letter-spaced */

  /* UI & body — Montserrat */
  --jn-font-lede:    400 18px/1.55 var(--jn-sans);
  --jn-font-body:    400 15px/1.6  var(--jn-sans);
  --jn-font-body-sm: 400 13px/1.55 var(--jn-sans);
  --jn-font-meta:    500 12px/1.5  var(--jn-sans);
  --jn-font-label:   500 11px/1 var(--jn-sans);   /* uppercase, tracked */
  --jn-font-button:  600 14px/1 var(--jn-sans);

  /* Tracking */
  --jn-track-tight:   -0.01em;
  --jn-track-normal:  0; /* @kind spacing */
  --jn-track-wide:    0.08em;
  --jn-track-caps:    0.12em;

  /* ===== Space & radius ================================================ */
  --jn-r-sm:  4px;   /* chips, pills inside rows */
  --jn-r:     8px;   /* buttons, inputs, cards */
  --jn-r-lg:  12px;  /* large cards, modals */
  --jn-r-xl:  20px;  /* hero blocks, editorial frames */
  --jn-r-pill: 999px;

  /* Spacing scale — 4px grid, generous at the top end */
  --jn-sp-1:  4px;
  --jn-sp-2:  8px;
  --jn-sp-3:  12px;
  --jn-sp-4:  16px;
  --jn-sp-5:  24px;
  --jn-sp-6:  32px;
  --jn-sp-7:  48px;
  --jn-sp-8:  64px;
  --jn-sp-9:  96px;
  --jn-sp-10: 128px;

  /* ===== Elevation — subtle, paper-like ================================ */
  --jn-shadow-1: 0 1px 2px rgba(26, 23, 20, 0.04), 0 1px 3px rgba(26, 23, 20, 0.06);
  --jn-shadow-2: 0 2px 4px rgba(26, 23, 20, 0.05), 0 4px 12px rgba(26, 23, 20, 0.06);
  --jn-shadow-3: 0 8px 24px rgba(26, 23, 20, 0.08), 0 2px 6px rgba(26, 23, 20, 0.05);
  --jn-shadow-focus: 0 0 0 3px rgba(113, 39, 78, 0.18);

  /* ===== Motion ======================================================== */
  --jn-ease:     cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --jn-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --jn-dur-fast: 120ms; /* @kind other */
  --jn-dur:      200ms; /* @kind other */
  --jn-dur-slow: 320ms; /* @kind other */
}

/* ==========================================================================
   Semantic element styles — apply when this file is linked
   ========================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body.jn,
.jn {
  font: var(--jn-font-body);
  color: var(--jn-fg);
  background: var(--jn-bg);
  letter-spacing: var(--jn-track-normal);
}

.jn h1, .jn-h1 { font: var(--jn-font-h1);   color: var(--jn-ink); letter-spacing: var(--jn-track-tight); margin: 0; }
.jn h2, .jn-h2 { font: var(--jn-font-h2);   color: var(--jn-ink); letter-spacing: var(--jn-track-tight); margin: 0; }
.jn h3, .jn-h3 { font: var(--jn-font-h3);   color: var(--jn-ink); margin: 0; }
.jn-display    { font: var(--jn-font-display); color: var(--jn-ink); letter-spacing: var(--jn-track-tight); margin: 0; }

.jn-eyebrow {
  font: var(--jn-font-eyebrow);
  letter-spacing: var(--jn-track-caps);
  text-transform: uppercase;
  color: var(--jn-garnet);
}
.jn-eyebrow--muted { color: var(--jn-fg-subtle); }

.jn-lede    { font: var(--jn-font-lede); color: var(--jn-ink); }
.jn-body    { font: var(--jn-font-body); color: var(--jn-ink); }
.jn-body-sm { font: var(--jn-font-body-sm); color: var(--jn-fg-muted); }
.jn-meta    { font: var(--jn-font-meta); color: var(--jn-fg-subtle); }
.jn-label   {
  font: var(--jn-font-label);
  letter-spacing: var(--jn-track-caps);
  text-transform: uppercase;
  color: var(--jn-fg-subtle);
}

.jn a { color: var(--jn-garnet); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.jn a:hover { color: var(--jn-garnet-deep); }
.jn a.btn, .jn a.btn-primary, .jn a.btn-secondary, .jn a.btn-ghost, .jn a.btn-text, .jn a.btn-on-dark, .jn a.nav-cta, .jn a.wordmark, .jn a.nav-item, .jn a.concierge { text-decoration: none; }
.jn a.btn-primary, .jn a.btn-on-dark, .jn a.nav-cta, .jn a.concierge { color: #fff; }
.jn a.btn-primary:hover, .jn a.nav-cta:hover, .jn a.concierge:hover { color: #fff; }

/* Utility text colors */
.jn-fg     { color: var(--jn-fg); }
.jn-fg-mut { color: var(--jn-fg-muted); }
.jn-fg-sub { color: var(--jn-fg-subtle); }
.jn-fg-garnet { color: var(--jn-garnet); }

/* Surfaces */
.jn-bg      { background: var(--jn-bg); }
.jn-surface { background: var(--jn-surface); }
.jn-tint    { background: var(--jn-garnet-tint); }