/* ==========================================================================
   myweighttracker: design tokens
   Palette: ink (text) / paper (bg) / plum + berry (brand duo) / mist (surface)
            / sage (reserved for positive & goal-reached states only)
   Type: Fraunces (display) + Manrope (body) + JetBrains Mono (data/numerals)
   ========================================================================== */

@import url('/fonts/fonts.css');

:root {
  /* ---- color: brand ---- */
  --ink:        #2A1633;
  --ink-soft:    rgba(42, 22, 51, 0.68);
  --ink-faint:   rgba(42, 22, 51, 0.42);
  --paper:      #FBF5F2;
  --paper-dim:  #F4EBE7;
  --plum:       #6E2F72;
  --plum-deep:  #4E2054;
  --berry:      #E14F82;
  --berry-deep: #C43868;
  --mist:       #F1E1EC;
  --mist-line:  #E4C9DC;
  --sage:       #3F7D63;
  --sage-mist:  #DEEDE6;

  /* ---- color: semantic ---- */
  --surface:        #FFFFFF;
  --surface-sunken: var(--mist);
  --border:          rgba(110, 47, 114, 0.16);
  --border-strong:   rgba(110, 47, 114, 0.3);
  --text:            var(--ink);
  --text-soft:       var(--ink-soft);
  --text-faint:      var(--ink-faint);
  --text-on-brand:   #FFF7FB;
  --focus-ring:      #A94FE1;

  --gradient-brand: linear-gradient(135deg, var(--plum) 0%, var(--berry) 100%);
  --gradient-hero:  radial-gradient(120% 140% at 12% 0%, #F9E9F1 0%, var(--paper) 45%, var(--paper) 100%);

  /* ---- type families ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- type scale (fluid) ---- */
  --step-2xs: 0.75rem;
  --step-xs:  0.8125rem;
  --step-sm:  0.9375rem;
  --step-md:  1.0625rem;
  --step-lg:  clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --step-xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem);
  --step-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.1rem);
  --step-3xl: clamp(2.75rem, 1.9rem + 4vw, 4.4rem);

  /* ---- spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* fixed 20px rhythm between dashboard sections, independent of the fluid rem scale above */
  --space-section: 20px;

  /* ---- shape / motion ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(78, 32, 84, 0.06), 0 12px 32px -16px rgba(78, 32, 84, 0.28);
  --shadow-pop:  0 4px 8px rgba(78, 32, 84, 0.08), 0 24px 48px -20px rgba(78, 32, 84, 0.4);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;

  --content-width: 72rem;
  --content-narrow: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #F6ECF4;
    --ink-soft:    rgba(246, 236, 244, 0.72);
    --ink-faint:   rgba(246, 236, 244, 0.48);
    --paper:      #1C1220;
    --paper-dim:  #241729;
    --surface:        #2A1B2F;
    --surface-sunken: #24172A;
    --mist:       #2E1E34;
    --mist-line:  rgba(225, 79, 130, 0.28);
    --border:          rgba(246, 236, 244, 0.12);
    --border-strong:   rgba(246, 236, 244, 0.22);
    --text:            var(--ink);
    --text-soft:       var(--ink-soft);
    --text-faint:      var(--ink-faint);
    --sage:            #7FCBAB;
    --sage-mist:       rgba(63, 125, 99, 0.22);
    --gradient-hero:  radial-gradient(120% 140% at 12% 0%, #34212f 0%, var(--paper) 55%, var(--paper) 100%);
  }
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body {
  font-family: var(--font-body);
  font-size: var(--step-md);
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul { list-style: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2.5px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* Type                                                                    */
/* ---------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--berry-deep);
}
.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.text-soft { color: var(--text-soft); }
.text-faint { color: var(--text-faint); }

/* ---------------------------------------------------------------------- */
/* Layout primitives                                                       */
/* ---------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.wrap--narrow { max-width: var(--content-narrow); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.85em 1.6em;
  font-weight: 700;
  font-size: var(--step-sm);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--gradient-brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { box-shadow: var(--shadow-pop); }

.btn--ghost {
  background: transparent;
  color: var(--plum);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover { background: var(--mist); }

.btn--quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border);
}
.btn--quiet:hover { border-color: var(--border-strong); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.6em 1.1em; font-size: var(--step-xs); }
.btn--danger { color: var(--berry-deep); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--mist); }

/* ---------------------------------------------------------------------- */
/* Cards & surfaces                                                        */
/* ---------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  font-size: var(--step-xs);
  font-weight: 700;
  background: var(--mist);
  color: var(--plum-deep);
}
.chip--sage { background: var(--sage-mist); color: var(--sage); }

/* ---------------------------------------------------------------------- */
/* Form controls                                                           */
/* ---------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.field label {
  font-size: var(--step-xs);
  font-weight: 700;
  color: var(--text-soft);
}
.field input,
.field select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8em 0.9em;
  background: var(--surface);
  font-size: var(--step-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--plum);
  box-shadow: 0 0 0 4px rgba(110, 47, 114, 0.14);
}
.field-hint { font-size: var(--step-2xs); color: var(--text-faint); }