/* ============================================================================
   RaDa — GreenStem Global Design System
   colors_and_type.css

   Source of truth: lib/theme/chemeli_theme.dart ("Chemeli" daylight release)
   + lib/theme/app_colors.dart (canonical brand anchors)
   + lib/theme/app_theme.dart (legacy dark theme — kept for reference)

   The CURRENT system is "Chemeli": a warm-cream daylight palette designed to
   read in bright Kenyan sun on low-end Android. Three brand anchors are
   preserved across every era: forest #0B1B1A, warm orange #DE994C, field
   green #4A9E25.

   Typefaces: Familjen Grotesk (display / UI) + JetBrains Mono (eyebrow, data,
   labels). Loaded via Google Fonts in the app through the `google_fonts`
   package. Legacy theme used Poppins (headings) + Inter (body).
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ───────────────────────── BRAND ANCHORS ─────────────────────────
     The three official GreenStem / RaDa colors. Preserved in every theme. */
  --forest:        #0B1B1A;   /* deep teal-forest — logo bg, dark ink, deep CTAs */
  --orange:        #DE994C;   /* warm brand orange — primary CTA / accent / highlight */
  --orange-deep:   #B47432;   /* pressed / heavier orange, gradient end */
  --orange-soft:   #FBE4C2;   /* orange wash — chips, soft fills */
  --green:         #4A9E25;   /* field green — growth, "good", success */
  --green-soft:    #D8EBC9;   /* green wash — good chips, progress track fills */
  --green-deep:    #356E1A;   /* heavier green — ink on green chips */

  /* ───────────────────────── SURFACES (LIGHT / DEFAULT) ───────────── */
  --bg-cream:      #F5EFE3;   /* app canvas / body */
  --bg-paper:      #FCF7EC;   /* raised cards / paper */
  --bg-cream-dim:  #EFE8DA;   /* recessed wells, inset rows */

  /* ───────────────────────── SURFACES (DARK MODE) ─────────────────── */
  --bg-deep:       #0B0D11;   /* dark canvas (near-black neutral) */
  --bg-ink:        #15181F;   /* dark raised card */
  --bg-deep-teal:  #0E1F1D;   /* hero-only teal-tinted dark (weather hero) */
  --bg-ink-teal:   #1A2D2A;   /* pro-mode teal-tinted dark surface */

  /* ───────────────────────── TEXT / INK ──────────────────────────── */
  --ink:           #16201E;   /* primary text — deep ink, not stark black */
  --ink-soft:      #4A5856;   /* secondary text */
  --ink-mute:      #7A8682;   /* tertiary / hint text */
  --ink-on-dark:        #F5EFE3;  /* primary text on dark */
  --ink-on-dark-soft:   #A8B8B5;  /* secondary text on dark */

  /* ───────────────────────── STATUS / PRIORITY TONES ──────────────── */
  --red:        #C0492B;  --red-soft:    #F4D6CB;  --red-ink:    #6E2511;  /* URGENT / HARAKA */
  --amber:      #D69020;  --amber-soft:  #F8E4BD;  --amber-ink:  #6E4710;  /* CAUTION / TAHADHARI */
  --blue:       #3B6F8C;  --blue-soft:   #CEDFE7;  --blue-ink:   #1F4459;  /* NOTE / TAARIFA (also water/NDMI) */
  /* GOOD / NZURI reuses --green / --green-soft / --green-deep */

  /* Semantic status (legacy app_colors.dart) */
  --success:    #4A9E25;
  --warning:    #FF9800;
  --error:      #F44336;
  --info:       #29B6F6;

  /* ───────────────────────── LINES / DIVIDERS ────────────────────── */
  --line:       #E0D6C2;   /* default hairline on cream */
  --line-soft:  #EBE2CF;   /* faint divider */
  --line-dark:  #27403D;   /* divider on dark surfaces */

  /* ───────────────────────── RADII ───────────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ───────────────────────── SHADOWS (soft, warm-tinted) ──────────── */
  /* Daylight-appropriate: low-alpha, warm-black (0x140F05) tint. */
  --shadow-1: 0 2px 8px rgba(20,15,5,0.04);
  --shadow-2: 0 2px 6px rgba(20,15,5,0.06), 0 12px 28px rgba(20,15,5,0.08);
  --shadow-3: 0 4px 12px rgba(20,15,5,0.10), 0 24px 48px rgba(20,15,5,0.12);

  /* ───────────────────────── SPACING SCALE (4pt 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-12: 48px;

  /* ───────────────────────── TYPE FAMILIES ───────────────────────── */
  --font-display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ───────────────────────── TYPE SCALE (Chemeli) ─────────────────── */
  /* Display + headline scale used across app screens. Sizes are the mobile
     spec; scale up proportionally for slides / desktop. */
  --t-eyebrow-size: 11px;   --t-eyebrow-spacing: 1.2px;  /* JetBrains Mono, w500, UPPERCASE */
  --t-display-size: 56px;   --t-display-weight: 600;     /* hero numbers (e.g. "24°") */
  --t-headline-size: 22px;  --t-headline-weight: 600;    /* screen titles */
  --t-title-size: 17px;     --t-title-weight: 600;       /* card titles */
  --t-body-size: 14px;      --t-body-weight: 400;        /* body copy */
  --t-body-soft-size: 13px;
  --t-caption-size: 11px;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Apply these directly, or copy the rules into component styles.
============================================================================ */

.rada-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--t-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rada-display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.0;
  color: var(--ink);
}

.rada-h1, h1.rada {
  font-family: var(--font-display);
  font-size: var(--t-headline-size);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}

.rada-h2, h2.rada {
  font-family: var(--font-display);
  font-size: var(--t-title-size);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--ink);
}

.rada-body, p.rada {
  font-family: var(--font-display);
  font-size: var(--t-body-size);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}

.rada-body-soft {
  font-family: var(--font-display);
  font-size: var(--t-body-soft-size);
  line-height: 1.35;
  color: var(--ink-soft);
}

.rada-caption {
  font-family: var(--font-display);
  font-size: var(--t-caption-size);
  color: var(--ink-soft);
}

.rada-mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption-size);
  color: var(--ink-soft);
}

/* Data figure — big metric numbers (NDVI 0.82, 5538mm, etc).
   Display face, tabular, status-colored by context. */
.rada-figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  color: var(--ink);
}