/* ═══════════════════════════════════════════════════════════════════════════
   Imago by Morpho — "Imago Light"
   The revamp's primary theme (docs/features/004-imago-visual-revamp.md).
   Ice-blue ground, white working sheets, Morpho navy ink, one family: Readex
   Pro. The five Morpho colours (#384064 navy · #2e60a8 blue · #4d8ec1 azure ·
   #acdbfc sky · #ffffff) carry the brand; the additions below stay in the same
   cool family. Token-agnostic app.css consumes these variables; the tokens
   after "Imago additions" are new and are what the revamped surfaces read.
   Mockups: tmp/mockups/ (canvas) · handoff: tmp/mockups/handoff/
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Background layers — ice ground, then white sheets ───────────────── */
  --void:    #EEF4FB;   /* app ground behind the rail and the sheet         */
  --depth:   #FFFFFF;   /* header bar, the working sheet                    */
  --surface: #FFFFFF;   /* card faces, panel bodies                         */
  --lift:    #F3F8FD;   /* inputs, table headers, raised micro-surfaces     */

  /* ── Borders — decorative only, never the sole marker of a control ──── */
  --border:  #D6E2F0;
  --bhi:     #C9D4EA;   /* control borders (inputs, secondary buttons)      */

  /* ── Primary accent — Morpho blue; 6.3:1 on white, white text on it ─── */
  --accent:     #2E60A8;
  --accent-bg:  rgba(46,96,168,.07);
  --accent-dim: #4D8EC1;   /* azure: hover tints, icons, shapes — never text */
  --accent-mid: rgba(46,96,168,.14);
  --accent-pop: rgba(46,96,168,.26);

  --gold:     var(--accent);
  --gold-bg:  var(--accent-bg);
  --gold-dim: var(--accent-dim);

  /* ── Status — the only non-blue hues, and only where meaning cannot ride
        on a label alone: an icon + word always accompanies them ─────────── */
  --cyan:    #2A72AE;   /* info / schema names (5.1:1)                      */
  --emerald: #1F7A8C;   /* success, connected — a cool teal (5.0:1)         */
  --rose:    #C0354F;   /* error, destructive (5.4:1)                       */
  --violet:  #4F5C9E;   /* secondary highlights                             */

  /* ── Text — the Morpho navy family ───────────────────────────────────── */
  --text:  #384064;     /* body + headings, 10.1:1 on white                 */
  --muted: #5B6485;     /* secondary, 5.8:1 on white, 5.3:1 on --void       */
  --faint: #8A94B3;     /* placeholders + disabled only, 3.0:1              */

  /* ── Typography — one family for Latin and Arabic; mono only for code ── */
  --display: 'Readex Pro', 'Segoe UI', Tahoma, Arial, sans-serif;
  --sans:    'Readex Pro', 'Segoe UI', Tahoma, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;   /* SQL, code, ids */

  /* ── Radius + elevation — the brand uses no shadows on surfaces; the
        shadows exist for overlays (menus, dialogs, popovers) only ──────── */
  --r:    10px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(56,64,100,.06);
  --shadow-md: 0 12px 32px -8px rgba(56,64,100,.16);
  --shadow-lg: 0 28px 64px -16px rgba(56,64,100,.22);
  --ring: 0 0 0 3px var(--accent-bg);

  /* ── Categorical series palette (charts) ──────────────────────────────────
     Slot 1 is Morpho blue; slots 2-8 are the validated set shipped in
     morpho-light, unchanged. Measured as a SET on #FFFFFF: protan ΔE 16.3,
     deutan ΔE 13.5, minimum contrast 2.17 — identical to the incumbent, so
     the relief rule still holds (direct labels or a table view). A chart
     with ONE series uses slot 1 only; sequential data uses --seq-*, never
     this set. Do not re-pick a slot by eye. */
  --series-1: #2E60A8;   /* Morpho blue */
  --series-2: #EB6834;   /* orange  */
  --series-3: #1BAF7A;   /* aqua    */
  --series-4: #EDA100;   /* yellow  */
  --series-5: #E87BA4;   /* magenta */
  --series-6: #008300;   /* green   */
  --series-7: #4A3AA7;   /* violet  */
  --series-8: #E34948;   /* red     */

  /* ═════════════════════════ Imago additions ═════════════════════════════ */

  /* Text and icons placed ON an --accent fill. Replace every hard-coded
     `color: #fff` that sits on var(--accent) with this. */
  --on-accent: #FFFFFF;

  /* Sequential ramp — heat tables, choropleths, single-measure intensity.
     Brand blues only; light to dark. Text on --seq-5 uses --on-accent. */
  --seq-1: #EEF4FB;
  --seq-2: #CFE7FB;
  --seq-3: #ACDBFC;
  --seq-4: #4D8EC1;
  --seq-5: #2E60A8;

  /* The petal: two opposite corners rounded (top-left + bottom-right), the
     other two nearly square. RESERVED for content the AI wrote or proposed —
     answers, insights, proposed metrics, proposed actions, AI descriptions.
     Everything a person made or the database reports uses --r / --r-lg. */
  --petal-sm: 18px 4px 18px 4px;   /* chips, small callouts, timeline nodes  */
  --petal:    24px 4px 24px 4px;   /* AI cards, insights, proposals          */
  --petal-lg: 32px 6px 32px 6px;   /* answers, the agent wing                */
  --r-sheet:  20px;                /* the white working sheet on the ground  */
  --r-pill:   9999px;

  /* AI-authored surfaces (pair with a --petal radius) */
  --ai-bg:     #F3F8FD;
  --ai-border: #ACDBFC;
  --ai-ink:    #2E60A8;   /* the "Proposed by Imago" provenance line         */

  /* The agent wing — the navy petal panel hosting the agent's voice beside
     a screen (Studio edit chat, semantic generation log). Same in both
     themes on purpose: it is the agent's colour, not the page's. */
  --wing-bg:     #384064;
  --wing-raised: #2C3352;   /* the agent's own messages inside the wing     */
  --wing-ink:    #FFFFFF;
  --wing-muted:  #C9D4EA;   /* 6.8:1 on --wing-bg                            */
  --wing-accent: #ACDBFC;   /* send button fill, checkmarks, 6.9:1          */
  --wing-border: #5B6485;   /* decorative                                   */

  /* The Imago mark's four wings, for inline SVG that follows the theme */
  --mark-1: #2E60A8;
  --mark-2: #4D8EC1;
  --mark-3: #7FB6E3;
  --mark-4: #ACDBFC;

  /* Status pills (Actions, Connections). Told apart by lightness AND word. */
  --pill-open-bg:   #ACDBFC;  --pill-open-ink:   #384064;
  --pill-active-bg: #FFFFFF;  --pill-active-ink: #2E60A8;   /* investigating, syncing: outlined */
  --pill-done-bg:   #2E60A8;  --pill-done-ink:   #FFFFFF;   /* investigated, healthy */
  --pill-final-bg:  #384064;  --pill-final-ink:  #FFFFFF;   /* approved, needs attention */

  /* Schema map: declared-key lines and PK/FK markers. app.css should read
     this as the first choice for its erd-fk colour, falling back to today's
     mix, so the other themes keep their colour. */
  --erd-key: var(--accent);

  /* Focus — 2px solid ring, offset 2px, on every interactive element */
  /* Labels: the app's small-caps mono labels become sentence-case Readex at a
     readable size. app.css etc. read these with the old look as fallback. */
  --label-font: var(--sans);
  --label-case: none;
  --label-tracking: 0;
  --label-min-size: 12px;

  /* Controls and page headers: the shared .btn / .form-group / .panel-hdr
     rules read these, with today's values as fallback for the other themes. */
  --control-h: 40px;
  --control-sm-h: 34px;
  --control-r: 10px;
  --control-font: var(--sans);
  --control-size: 14px;
  --control-sm-size: 13px;
  --control-weight: 500;
  --control-bg: var(--surface);
  --control-border: var(--bhi);
  --field-bg: var(--surface);
  --field-border: var(--bhi);
  --page-hdr-pad: 26px 32px 20px;
  --page-title-size: 26px;
  --page-title-tracking: -0.02em;
  --page-sub-size: 15px;

  --focus: #2E60A8;
}