/* ============================================================
   Cadence · Material & Elevation — the "C-Hybrid" model
   Two materials, one rule. Everything sits over the OVERCAST FIELD.

   1. FLAT WHITE  — the DATA material. Opaque, high-contrast,
      never translucent. Every card, row, chart, and list. Holds
      all numbers. Soft single shadow.
   2. FROSTED GLASS — the CHROME material. Translucent, elevated,
      temporary. Confirmation sheets, widgets, reminders, tab bar.
      Floats above content; never holds primary data.

   The field is the constant backdrop; the accent appears only
   where it carries meaning. Never a hard gradient.
   ============================================================ */

:root {
  /* ---- The overcast field (page / hero backdrop) ---- */
  --field: linear-gradient(160deg, #E6ECF0 0%, #D6DEE4 50%, #E0E6EA 100%); /* @kind other */
  --field-soft: linear-gradient(160deg, #EAEEF1 0%, #DCE3E8 45%, #E6EAED 100%); /* @kind other */
  /* Faint teal + grey blobs are layered with radial-gradients in markup,
     blurred 6–10px — never a hard gradient. */
  --field-blob-teal: radial-gradient(circle, rgba(58,107,126,0.20), rgba(58,107,126,0) 70%); /* @kind other */
  --field-blob-grey: radial-gradient(circle, rgba(150,165,178,0.45), rgba(150,165,178,0) 70%); /* @kind other */
  --field-blob-light: radial-gradient(circle, rgba(255,255,255,0.70), rgba(255,255,255,0) 70%); /* @kind other */

  /* ---- Material 1 · Flat white (data) ---- */
  --shadow-card:  0 6px 20px rgba(30,42,57,0.06);   /* resting data card on the field */
  --shadow-pop:   0 4px 12px rgba(30,42,57,0.10);   /* chart callouts, small popovers */
  --shadow-flat:  0 1px 3px  rgba(30,42,57,0.12);   /* segmented thumb, tiny lift */

  /* ---- Material 2 · Frosted glass (chrome) ---- */
  --glass-fill:        rgba(255,255,255,0.42);
  --glass-fill-strong: rgba(255,255,255,0.46);
  --glass-border:      rgba(255,255,255,0.65);
  --glass-blur:        blur(20px) saturate(120%); /* @kind other */
  --shadow-glass:    0 12px 40px rgba(20,38,46,0.12);   /* widget, toast, tab bar */
  --shadow-glass-lg: 0 16px 48px rgba(20,38,46,0.16);   /* confirmation sheet */

  /* ---- Borders that read as "edges" not "outlines" ---- */
  --edge-card:  1px solid var(--c-line); /* @kind other */
  --edge-tile:  1px solid #E1E5E9; /* @kind other */
}

/* Dark · overcast night — the field goes deep, glass goes smokier */
[data-theme="dark"] {
  --field: linear-gradient(160deg, #1A222C 0%, #131A22 50%, #1C242E 100%); /* @kind other */
  --field-soft: linear-gradient(160deg, #1C242E 0%, #141B23 45%, #1E2630 100%); /* @kind other */
  --field-blob-teal: radial-gradient(circle, rgba(107,166,184,0.18), rgba(107,166,184,0) 70%); /* @kind other */
  --field-blob-grey: radial-gradient(circle, rgba(90,108,122,0.40), rgba(90,108,122,0) 70%); /* @kind other */
  --field-blob-light: radial-gradient(circle, rgba(120,140,158,0.30), rgba(120,140,158,0) 70%); /* @kind other */

  --shadow-card:  0 6px 20px rgba(0,0,0,0.30);
  --shadow-pop:   0 4px 12px rgba(0,0,0,0.40);
  --shadow-flat:  0 1px 3px  rgba(0,0,0,0.45);

  --glass-fill:        rgba(38,48,60,0.50);
  --glass-fill-strong: rgba(40,52,64,0.56);
  --glass-border:      rgba(160,180,198,0.18);
  --shadow-glass:    0 12px 40px rgba(0,0,0,0.45);
  --shadow-glass-lg: 0 16px 48px rgba(0,0,0,0.55);

  --edge-tile: 1px solid #29323E; /* @kind other */
}