/* ============================================================
   BASE — Reset, Custom Properties, Typography
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* Primary */
  --color-primary:        #1a6b3a;
  --color-primary-dark:   #0d4726;
  --color-primary-light:  #e8f5e9;

  /* Grades */
  --grade-1-bg: #e8f5e9;
  --grade-1-fg: #1b5e20;
  --grade-2-bg: #f1f8e9;
  --grade-2-fg: #33691e;
  --grade-3-bg: #fff8e1;
  --grade-3-fg: #e65100;
  --grade-4-bg: #fff3e0;
  --grade-4-fg: #bf360c;
  --grade-5-bg: #ffebee;
  --grade-5-fg: #b71c1c;

  /* Neutrals */
  --color-bg:           #f5f5f5;
  --color-surface:      #ffffff;
  --color-border:       #e0e0e0;
  --color-text:         #212121;
  --color-text-secondary: #757575;
  --color-danger:       #c62828;
  --color-danger-light: #ffebee;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.15);

  /* Layout */
  --header-h:    56px;
  --nav-h:       60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Prevent iOS bounce on body */
body {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
}

p { margin: 0; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  touch-action: manipulation;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Utility helpers */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Grade color helpers */
.grade-color-1 { background: var(--grade-1-bg); color: var(--grade-1-fg); }
.grade-color-2 { background: var(--grade-2-bg); color: var(--grade-2-fg); }
.grade-color-3 { background: var(--grade-3-bg); color: var(--grade-3-fg); }
.grade-color-4 { background: var(--grade-4-bg); color: var(--grade-4-fg); }
.grade-color-5 { background: var(--grade-5-bg); color: var(--grade-5-fg); }