/* ============================================================
   Feedee design tokens
   ============================================================
   Brand: calm, warm, premium first-foods tracker (iOS).
   Use the CSS custom properties below — never hard-code colors,
   type, or shadows in component CSS.
   ============================================================ */

/* --- Fonts (Google Fonts) ------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=DM+Sans:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Color: brand palette ---------- */
  --color-lavender: #DDC7EC;     /* backgrounds / header fields */
  --color-orange:   #E66930;     /* primary accent, logo, CTAs */
  --color-dark:     #2F2F2F;     /* headings & body text */
  --color-plum:     #4A3F55;     /* icon strokes, secondary text */
  --color-white:    #FFFFFF;     /* cards */
  --color-gray:     #F2F2F2;     /* inactive / disabled */

  /* Pressed / darker variants — generated by oklch from brand colors */
  --color-orange-press: #C75620;
  --color-plum-press:   #3A3144;

  /* ---------- Color: semantic ---------- */
  --bg-surface:       var(--color-white);
  --bg-page:          var(--color-white);
  --bg-header:        var(--color-lavender);
  --bg-inactive:      var(--color-gray);

  --fg-primary:       var(--color-dark);
  --fg-secondary:     var(--color-plum);
  --fg-tertiary:      #6F6878;
  --fg-on-orange:     var(--color-white);
  --fg-on-lavender:   var(--color-dark);
  --fg-disabled:      #A8A8A8;

  --accent:           var(--color-orange);
  --accent-press:     var(--color-orange-press);

  --icon-stroke:      var(--color-plum);

  /* ---------- Type: families ---------- */
  --font-display:  "Fraunces", "Newsreader", Georgia, serif;
  --font-body:     "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Wordmark is an image asset (assets/logo/feedee-wordmark-transparent.png), not a font. */
  --font-display-settings: "opsz" 144, "SOFT" 50;

  /* ---------- Type: scale (mobile-first) ---------- */
  --text-hero:    40px;     /* screen hero numbers */
  --text-h1:      28px;     /* screen titles */
  --text-h2:      22px;     /* section titles */
  --text-h3:      18px;     /* card titles */
  --text-body:    16px;     /* default body */
  --text-label:   14px;     /* labels, secondary */
  --text-caption: 12px;     /* meta, microcopy */
  --text-button:  16px;     /* button label */

  /* ---------- Type: line heights ---------- */
  --leading-display: 1.15;
  --leading-body:    1.45;
  --leading-tight:   1.25;

  /* ---------- Type: weights ---------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;

  /* ---------- Radii ---------- */
  --radius-chip:    8px;
  --radius-button:  12px;
  --radius-input:   12px;
  --radius-card:    16px;
  --radius-tile:    20px;
  --radius-appicon: 24px;
  --radius-pill:    999px;

  /* ---------- Shadows (two levels only) ---------- */
  --shadow-resting:  0 2px 12px rgba(47, 47, 47, 0.06), 0 1px 2px rgba(47, 47, 47, 0.04);
  --shadow-floating: 0 12px 32px rgba(47, 47, 47, 0.12);

  /* ---------- Motion ---------- */
  --ease-feedee:    cubic-bezier(0.32, 0.72, 0.32, 1);
  --dur-tap:        180ms;
  --dur-enter:      240ms;
  --dur-sheet:      320ms;

  /* ---------- Layout constants (mobile) ---------- */
  --screen-pad-x:    20px;
  --card-pad:        16px;
  --hero-card-pad:   20px;
  --tabbar-height:   64px;
  --button-height:   52px;
  --input-height:    48px;
  --tile-gap:        12px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  margin: 0;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0; }

p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.feedee-hero-number {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  line-height: var(--leading-display);
  color: var(--fg-primary);
}

.feedee-label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}

.feedee-caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--fg-tertiary);
}

.feedee-wordmark {
  /* Wordmark is rendered as the image asset, not type.
     Use <img src="assets/logo/feedee-wordmark-transparent.png"> with the height you need. */
  display: inline-block;
  height: 1.4em;
  width: auto;
}

/* Buttons */
.feedee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-button);
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-tap) var(--ease-feedee),
              background var(--dur-tap) var(--ease-feedee);
}
.feedee-btn--primary   { background: var(--accent); color: var(--fg-on-orange); }
.feedee-btn--secondary { background: var(--color-white); color: var(--fg-secondary); }
.feedee-btn--block     { width: 100%; }
.feedee-btn:active     { transform: scale(0.98); }
.feedee-btn--primary:active { background: var(--accent-press); }
.feedee-btn:disabled   { background: var(--bg-inactive); color: var(--fg-disabled); cursor: not-allowed; transform: none; }

/* Cards */
.feedee-card {
  background: var(--bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-resting);
  padding: var(--card-pad);
}

/* Chips */
.feedee-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-chip);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  background: var(--bg-inactive);
  color: var(--fg-primary);
}
.feedee-chip--active { background: var(--color-plum); color: var(--color-white); }