/* =====================================================================
   AgriProfile — Design Tokens
   Colors & Typography for both Web (staff) and Mobile (farmer) surfaces.
   ===================================================================== */

/* ---------- Fonts (Google Fonts fallback — see README for substitution note) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     COLOR PRIMITIVES
     ========================================================= */

  /* Primary — Rice Paddy Green. */
  --green-50:  #ECF6EF;
  --green-100: #D2EADB;
  --green-200: #A7D5B8;
  --green-300: #74BA8F;
  --green-400: #45A06B;
  --green-500: #1F7A4C;  /* PRIMARY */
  --green-600: #166140;
  --green-700: #114C32;
  --green-800: #0C3623;
  --green-900: #07211A;

  /* Accent — Terracotta / earth. */
  --clay-50:  #FBF1E9;
  --clay-100: #F4DFCD;
  --clay-200: #E8BD9C;
  --clay-300: #D99968;
  --clay-400: #C26E3B;   /* ACCENT */
  --clay-500: #A0582C;
  --clay-600: #7E4221;
  --clay-700: #5C2F17;

  /* Data — Sky / weather blue. */
  --sky-50:  #EAF3FB;
  --sky-100: #CBE2F4;
  --sky-200: #8DC1E7;
  --sky-300: #4F9BD4;
  --sky-400: #2E7BB8;    /* DATA */
  --sky-500: #1F5D93;
  --sky-600: #15466F;

  /* Neutrals — Soil & paper. */
  --ink-0:   #FFFFFF;
  --ink-25:  #FBFAF7;
  --ink-50:  #F5F3EE;
  --ink-100: #ECE9E2;
  --ink-200: #DAD5CB;
  --ink-300: #B7B0A3;
  --ink-400: #8C8578;
  --ink-500: #6B6557;
  --ink-600: #4B463C;
  --ink-700: #322E27;
  --ink-800: #1D1B17;
  --ink-900: #0F0E0B;

  /* Semantic status */
  --status-success: #2E9E5D;
  --status-warning: #D9A441;
  --status-danger:  #C94B3F;
  --status-info:    var(--sky-400);

  /* Crop tags */
  --crop-rice:    #C9A227;
  --crop-corn:    #E8B23A;
  --crop-banana:  #F2C94C;
  --crop-coconut: #7A5C3C;
  --crop-cacao:   #6B3A2A;

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --bg:          var(--ink-25);
  --bg-elevated: var(--ink-0);
  --bg-alt:      var(--ink-50);
  --bg-inverse:  var(--ink-800);

  --fg-1: var(--ink-800);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-500);
  --fg-4: var(--ink-400);
  --fg-inverse: var(--ink-0);

  --brand:         var(--green-500);
  --brand-hover:   var(--green-600);
  --brand-press:   var(--green-700);
  --brand-subtle:  var(--green-50);
  --brand-border:  var(--green-200);

  --accent:        var(--clay-400);
  --accent-hover:  var(--clay-500);
  --accent-subtle: var(--clay-50);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-subtle: var(--ink-100);

  --focus-ring: rgba(31, 122, 76, 0.35);

  /* =========================================================
     TYPOGRAPHY — FAMILIES
     ========================================================= */
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* =========================================================
     TYPOGRAPHY — SCALE
     ========================================================= */
  --fs-display: 44px;  --lh-display: 1.08;  --tr-display: -0.02em;
  --fs-h1:      32px;  --lh-h1:      1.15;  --tr-h1:      -0.015em;
  --fs-h2:      24px;  --lh-h2:      1.22;  --tr-h2:      -0.01em;
  --fs-h3:      19px;  --lh-h3:      1.3;   --tr-h3:      -0.005em;
  --fs-h4:      16px;  --lh-h4:      1.35;  --tr-h4:      0;
  --fs-body:    15px;  --lh-body:    1.55;
  --fs-body-sm: 13px;  --lh-body-sm: 1.5;
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-micro:   11px;  --lh-micro:   1.3;
  --fs-mono:    13px;  --lh-mono:    1.5;

  /* =========================================================
     SPACING (4/8 base)
     ========================================================= */
  --sp-0: 0;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* =========================================================
     RADII
     ========================================================= */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* =========================================================
     ELEVATION — "paper on desk"
     ========================================================= */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 14, 11, 0.04), 0 0 0 1px rgba(15, 14, 11, 0.04);
  --shadow-2: 0 2px 6px rgba(15, 14, 11, 0.06), 0 0 0 1px rgba(15, 14, 11, 0.05);
  --shadow-3: 0 8px 20px rgba(15, 14, 11, 0.08), 0 1px 3px rgba(15, 14, 11, 0.05);
  --shadow-pin: 0 3px 6px rgba(15, 14, 11, 0.25), 0 1px 2px rgba(15, 14, 11, 0.15);
  --shadow-inset: inset 0 1px 2px rgba(15, 14, 11, 0.06);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* =========================================================
   THEME VARIANTS  (Appearance › Theme)
   Applied via <html data-theme="…"> by appearance.js.
   `paper` is the default already defined in :root above, so it
   needs no override block. Only surface + brand tokens change —
   text/status colors stay constant for consistent contrast.
   ========================================================= */
:root[data-theme="daylight"] {
  --bg:          #FFFFFF;   /* crisp, pure white */
  --bg-elevated: #FFFFFF;
  --bg-alt:      #F3F5F7;   /* cool light grey */

  --border:        #E3E6EA;
  --border-strong: #CDD2D8;
  --border-subtle: #EEF1F4;
}

:root[data-theme="field"] {
  --bg:          #ECE9E2;   /* warm greige "in the field" */
  --bg-elevated: #FFFFFF;
  --bg-alt:      #E4E0D6;

  --brand:        var(--green-600);   /* deeper forest green */
  --brand-hover:  var(--green-700);
  --brand-press:  var(--green-800);

  --border:        #D6D0C5;
  --border-strong: #C0B9AB;
  --border-subtle: #E5E0D6;
}

/* =========================================================
  BASE ELEMENT STYLES
  ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--fg-1); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--fg-1); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--fg-1); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg-1); margin: 0; }

.display { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg-1); }
.report-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--fg-1); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); margin: 0; }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); letter-spacing: 0.01em; }
.micro   { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

.mono, code, kbd, pre { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); }

::focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }