/* =========================================================================
   Purely — Design Tokens
   Source of truth: Purely/Utilities/DesignSystem.swift + DESIGN.md
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — Instrument Serif Italic (display), Instrument Sans (body),
   JetBrains Mono (SF Mono fallback for INCI / codes)
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,400;0,500;0,600;0,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =======================================================================
     COLORS — primitives (map 1:1 to Purely/Assets.xcassets colorsets)
     ======================================================================= */
  --p-sage-green:    #7C9A82;  /* primary brand, buttons, nav, active        */
  --p-warm-beige:    #F5F0E8;  /* page background (always)                   */
  --p-cream:         #FAF8F3;  /* card surfaces, scanner background          */
  --p-dark-forest:   #2D3B30;  /* primary text, headings                     */
  --p-medium-sage:   #4A5D4E;  /* secondary text, captions, metadata         */
  --p-beige-dark:    #D4C9B8;  /* borders, dividers, ring shadows            */

  /* Traffic light (EU regulatory signal) */
  --p-pastel-green:  #A0D4A0;  /* score 80–100 · No flags found                  */
  --p-pastel-yellow: #E8D4A0;  /* score 50–79  · Some ingredient concerns                */
  --p-pastel-red:    #E8A0A0;  /* score 0–49   · High-priority ingredient concerns                */

  /* Dark-text variants for pastel fills (legibility) */
  --p-score-green:   #3A7A40;
  --p-score-yellow:  #7A6020;
  --p-score-red:     #7A2020;

  /* =======================================================================
     COLORS — semantic roles
     ======================================================================= */
  --bg-page:         var(--p-warm-beige);
  --bg-surface:      var(--p-cream);
  --bg-scanner:      var(--p-cream);
  --fg-primary:      var(--p-dark-forest);
  --fg-secondary:    var(--p-medium-sage);
  --fg-muted:        color-mix(in srgb, var(--p-medium-sage) 70%, transparent);
  --fg-brand:        var(--p-sage-green);
  --fg-on-brand:     #ffffff;
  --border-subtle:   var(--p-beige-dark);
  --ring-shadow:     var(--p-beige-dark);

  /* =======================================================================
     TYPOGRAPHY — font stacks
     ======================================================================= */
  --font-serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:   'Mona Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
                 monospace;

  /* =======================================================================
     TYPOGRAPHY — base tokens (match PurelyTheme.Font)
     ======================================================================= */
  --font-wordmark-size:    32px;
  --font-display-size:     28px;
  --font-headline-size:    22px;
  --font-score-size:       40px;
  --font-subheadline-size: 17px;
  --font-body-size:        16px;
  --font-footnote-size:    13px;
  --font-caption-size:     12px;
  --font-ingredient-size:  14px;

  --tracking-wordmark:     0.01em;
  --tracking-display:      0.005em;
  --tracking-headline:     0.003em;
  --tracking-score:        0.01em;

  /* =======================================================================
     SPACING
     ======================================================================= */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* =======================================================================
     RADII
     ======================================================================= */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* =======================================================================
     SHADOWS
     ======================================================================= */
  --shadow-ring:  0 1px 0 0 var(--p-beige-dark);                /* hard ring  */
  --shadow-cta:   0 4px 8px 0 rgba(124, 154, 130, 0.30);        /* sage CTA   */
}

/* =========================================================================
   DARK APPEARANCE (MD3-inspired, from docs/design/dark-mode.md)
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --p-sage-green:    #AFCEB4;
    --p-warm-beige:    #14130F;
    --p-cream:         #21201B;
    --p-dark-forest:   #E6E2DA;  /* text inverts to warm off-white */
    --p-medium-sage:   #C2C8C0;
    --p-beige-dark:    #424842;
  }
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */
body, .p-body {
  font-family: var(--font-sans);
  font-size: var(--font-body-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.p-wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-wordmark-size);
  letter-spacing: var(--tracking-wordmark);
  color: var(--fg-primary);
}
.p-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-display-size);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
}
.p-headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-headline-size);
  line-height: 1.2;
  letter-spacing: var(--tracking-headline);
  color: var(--fg-primary);
}
.p-score {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-score-size);
  letter-spacing: var(--tracking-score);
  line-height: 1;
}
.p-subheadline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-subheadline-size);
  color: var(--fg-primary);
}
.p-footnote {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-footnote-size);
  color: var(--fg-secondary);
}
.p-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-caption-size);
  color: var(--fg-secondary);
}
.p-ingredient {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--font-ingredient-size);
  color: var(--fg-secondary);
}

/* Overline / status label — ALL CAPS reserved for badges + overlines */
.p-overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-caption-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* =========================================================================
   COMPONENT PRIMITIVES
   ========================================================================= */
.p-card {
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.p-card--elevated {
  background: var(--bg-surface);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-ring);
}
.p-card--lg {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.p-cta {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-headline-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  background: var(--p-sage-green);
  color: var(--fg-on-brand);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.p-cta:hover  { opacity: 0.92; }
.p-cta:active { opacity: 0.85; }

.p-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--font-caption-size);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
}
.p-chip--prohibited { background: color-mix(in srgb, var(--p-pastel-red) 20%, transparent);    color: var(--p-score-red); }
.p-chip--restricted { background: color-mix(in srgb, var(--p-pastel-yellow) 20%, transparent); color: var(--p-score-yellow); }
.p-chip--regulated  { background: color-mix(in srgb, var(--p-medium-sage) 20%, transparent);   color: var(--p-medium-sage); }
.p-chip--approved   { background: color-mix(in srgb, var(--p-pastel-green) 20%, transparent);  color: var(--p-score-green); }