/* ===========================
   base.css
   Reset, design tokens (CSS variables), and root element styles.
   =========================== */

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Design Tokens ---- */
:root {
  --c1: #def2d9;
  --c2: #e2daf2;
  --c3: #fce2d4;
  --c4: #d9ebf2;
  --c5: #f2d9de;

  --ink:       #2a2228;
  --ink-mid:   #7a6e76;
  --ink-light: #c0b4bc;
  --bg:        #fdf9f7;
  --white:     #ffffff;

  --milk:    #fce2d4;
  --pee:     #d9ebf2;
  --poop:    #c9a580;
  --sleep:   #e2daf2;
  --bath:    #c4e2ee;
  --weight:  #f2d9de;
  --height:  #e8e0f0;
  --vitamin: #def2d9;
  --tummy:   #e8f4e8;
  --note:    #fef3e8;

  --milk-ink:    #c27c5a;
  --pee-ink:     #3a7ca5;
  --poop-ink:    #6b5432;
  --sleep-ink:   #7c5cbf;
  --bath-ink:    #2d7a9e;
  --weight-ink:  #c75b6d;
  --height-ink:  #6b5a8c;
  --vitamin-ink: #5a8c5a;
  --tummy-ink:   #5a8c5a;
  --note-ink:    #c27c5a;

  --radius-card: 20px;
  --radius-btn:  14px;

  --shadow-card: 0 2px 10px rgba(42,34,40,.06);
  --shadow-btn:  0 2px 8px rgba(42,34,40,.08);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ---- Root Elements ---- */
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--safe-bottom) + 20px);
  padding-left:  var(--safe-left);
  padding-right: var(--safe-right);
}

/* ---- Shared animation ---- */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}