/* ChatFlow design A tokens, shared by the admin shell (/chatflow) and, later, the inbox.
   Day lives on :root, night on :root[data-theme="night"] (the shell always resolves
   data-theme to "day" or "night" before first paint), and the Increase Contrast
   overrides follow. The design A values are copied verbatim from
   public/inbox-v2/styles.css (lines 6-127); the roles A lacked (warn, chart palette,
   type scale, spacing, radius, focus) are added below them, and so is the 2026-09-30
   colour language (status and identity colours, card shadow).

   This file holds custom properties only. It deliberately sets no color-scheme and
   no font-family on :root: either one would restyle native controls or text in the
   admin views that are not converted yet. A component that needs native controls
   themed sets `color-scheme: var(--scheme)` on itself.

   Rule: a night value lives here and nowhere else. Never theme through [style*=...]. */

:root {
  --scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;

  /* ground + structure */
  --bg: #FFFFFF;            /* canvas, rows, bot bubble, pending money capsule */
  --pop: #FFFFFF;           /* menus, sheets, dialogs */
  --hover: #F7F7F9;
  --fill: #F1F1F4;          /* search, pills, lead bubble, composer field, BLOCKED mark */
  --line: #E4E4E9;          /* hairlines */
  --edge: #CFCFD4;          /* control outlines */
  --edge-strong: #CFCFD4;   /* bot bubble border, pending money capsule */

  /* text */
  --ink: #1C1C1E;
  --ink-2: #636368;

  /* reply blue: unread dot, Unread count, Send */
  --reply: #0B5FC7;
  --on-reply: #FFFFFF;
  --reply-tint: #E6EFFC;

  /* the money ladder: one green */
  --money: #176B3A;         /* REG text + dots, Reg capsule, tab dots */
  --money-tint: #E4F3E9;    /* REG mark, Reg confirmed capsule */
  --money-solid: #176B3A;   /* FTD mark, FTD confirmed capsule */
  --on-money: #FFFFFF;
  --reg-check: #FFFFFF;     /* check cut-out on the Reg capsule disc */

  /* alerts + failed send */
  --alert: #A61B1B;
  --on-alert: #FFFFFF;
  --fail-fill: #FDECEA;
  --fail-edge: #E8A59D;
  --fail-label: #7A1616;
  --retry: #1C1C1E;
  --on-retry: #FFFFFF;

  /* chatter bubble (graphite) */
  --chatter: #1D1C27;
  --on-chatter: #FFFFFF;
  --chatter-label: #E4E2EE;
  --chatter-time: #BDBBCC;

  --dot: #1C1C1E;           /* active account dot */
  --select-ring: #8E8E93;   /* select-mode ring, 3:1 on rows */
  --scrim: rgba(28, 28, 30, .32);
  --shadow-pop: 0 12px 32px rgba(28, 28, 30, .14), 0 2px 6px rgba(28, 28, 30, .06);
  --skeleton-a: #F1F1F4;
  --skeleton-b: #F8F8FA;

  /* avatar tints (desaturated, never a status hue) */
  --av-sand-bg: #EFE6D8;  --av-sand-fg: #6B5433;
  --av-stone-bg: #E6E6E3; --av-stone-fg: #53534E;
  --av-mauve-bg: #EAE1EE; --av-mauve-fg: #5E4468;
  --av-rose-bg: #F1E1E1;  --av-rose-fg: #7A3F3F;
  --av-clay-bg: #F0E3D9;  --av-clay-fg: #7A4A2C;
  --av-slate-bg: #E3E6EA; --av-slate-fg: #4A5260;

  /* ---- roles added for the admin ---- */

  /* warn: Watch, Warming, Queued, Scheduled, notices (6.33:1 day, 7.73:1 night) */
  --warn: #8A5300;
  --warn-tint: #FFF4E0;

  /* ---- colour language (Juanlu 2026-09-30; supersedes design A's "almost no colour") ----
     Every pair is text on its own tint at 4.5:1 or better, day and night. The five status
     texts also hold 4.5:1 on --bg, --pop, --hover and --fill, so the .num-* and .status.is-*
     helpers can colour a value or a word on any ground. The measured numbers of every pair
     live in the design folder's COLOUR-TOKENS.md. Colour always travels with its word. */

  /* status: ok = good, connected, live, active, goal met (green); warn = watch, warming,
     scheduled, queued (above); bad = error, kill, banned, disabled, failed, stopped (red,
     the alert role); info = info, link-ish, running (blue); idle = off, idle, none (grey) */
  --ok: #137337;              /* 5.10:1 on --ok-tint, 5.94:1 on --bg */
  --ok-tint: #DAF4E2;
  --bad: var(--alert);        /* 6.57:1 on --bad-tint, 7.52:1 on --bg */
  --bad-tint: var(--fail-fill);
  --info: #0B5FC7;            /* the --reply hue; 5.21:1 on --info-tint */
  --info-tint: #E6EFFC;
  --idle: var(--ink-2);       /* 4.80:1 on --idle-tint */
  --idle-tint: #E6E6EB;       /* a step darker than --fill, so an idle chip shows on white and on --canvas */

  /* solid status: the lifecycle words that must pop at a glance (Active, Live, Warming,
     Watch, Banned, Kill, Failed, Low), the way the pre-2.0 pages drew them. White on the
     solid: 5.02:1 (ok, warn) and 5.62:1 (bad); the same fills by night (3.39, 3.39 and
     3.02:1 against --pop as a shape). */
  --ok-solid: #15803D;
  --warn-solid: #B45309;
  --bad-solid: #C62828;
  --on-solid: #FFFFFF;

  /* canvas: the ground of a content area whose content sits in cards. By day the white
     cards lift off #F0F2F5 (1.12:1) and their soft shadow shows; by night it is --bg.
     Text on it: --ink 15.17, --ink-2 5.33, --reply 5.39, ok 5.30, warn 5.64, bad 6.70:1.
     A neutral control standing on it (not inside a card) is raised by day (--pop ground,
     --line edge, card shadow): a --fill ground would vanish (1.03:1). */
  --canvas: #F0F2F5;
  --canvas-ctl: var(--pop);
  --canvas-ctl-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);

  /* identity: one hue per kind of thing, the same everywhere (Tracker, Ads, Account Pool,
     Flows). Meta blue, TikTok the black chip (its tint is the dark ground, its text the
     light one; by night it adds a grey outline), bot indigo, DM account teal, channel
     purple, external grey. */
  --id-meta: #0A58C2;         /* 5.58:1 on its tint */
  --id-meta-tint: #E3EDFD;
  --id-tiktok: #FFFFFF;       /* 17.01:1 on its tint */
  --id-tiktok-tint: #1C1C1E;
  --id-tiktok-edge: transparent; /* night outlines the black chip on the dark ground */
  --id-bot: #5438C8;          /* 6.31:1 */
  --id-bot-tint: #ECE8FD;
  --id-dm: #0A6B61;           /* 5.47:1 */
  --id-dm-tint: #DCF2EE;
  --id-channel: #8A2A9C;      /* 6.03:1 */
  --id-channel-tint: #F5E5F8;
  --id-external: var(--ink-2); /* 5.30:1 */
  --id-external-tint: var(--fill);

  /* card shadow: cards and grouped lists (menus and dialogs keep --shadow-pop). The
     card's 1px --line border stays in both themes, so night keeps its edge. */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);

  /* field edge: the outline of inputs, selects and check lists, where the edge is
     the field's only boundary (a field on a dialog shares its ground), so it meets
     the 3:1 floor for component boundaries: 3.26:1 on #FFFFFF. --edge (1.55:1) stays
     for hairline-weight outlines that are not a field's boundary. */
  --edge-field: #8E8E93;

  /* chrome: the sidebar ground is --fill by day and --pop by night */
  --nav-ground: var(--fill);

  /* focus ring: one blue for interaction */
  --focus: var(--reply);

  /* hover/press veil laid over any button ground: darkens by day, lightens by night */
  --press-overlay: rgba(28, 28, 30, .08);

  /* chart palette: one hue per series role, for marks only (lines, bars, dots), never
     for text: by day four of them are 3.4 to 4.1:1 on white, above the 3:1 graphics floor */
  --chart-revenue: #169F48;  /* revenue, sales, CR */
  --chart-roas: #0891B2;     /* ROAS */
  --chart-leads: #2563EB;    /* leads */
  --chart-cost: #CA6F06;     /* links, CPL, cost */
  --chart-c2l: #DC2626;      /* C2L, cold ROAS */
  --chart-spend: #7C3AED;    /* spend, %UP */
  --chart-cpm: #0E7490;      /* CPM */
  --chart-paypal: #0284C7;   /* PayPal */
  /* REGs, L2R % and CPR (Juanlu 2026-10-07): the inbox's REG green (--money, which also
     carries its night value), so a REG reads in one colour everywhere: 6.56:1 on white */
  --chart-regs: var(--money);
  /* New sales, New CR % and New ROAS: a hue of their own, distinct from the all-sales green and
     the cold red they share a chart with: 4.60:1 on white */
  --chart-new: #DB2777;

  /* type scale: size / line height; weights 400 and 600, 700 only on hero numbers */
  --fs-badge: 11px;   --lh-badge: 14px;    /* badges, chips, pills (the floor) */
  --fs-caption: 12px; --lh-caption: 16px;  /* captions, hints, table headers */
  --fs-label: 13px;   --lh-label: 18px;    /* labels, table body, secondary text */
  --fs-body: 15px;    --lh-body: 20px;     /* body, row titles */
  --fs-section: 17px; --lh-section: 22px;  /* section titles */
  --fs-title: 20px;   --lh-title: 32px;    /* page titles */
  --fs-hero: 28px;    --lh-hero: 34px;     /* hero numbers */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-hero: 600;

  /* spacing and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-control: 8px;
  --radius-card: 12px;
  --control-h: 32px;        /* buttons on desktop; 44px under (pointer: coarse) */
  --control-h-sm: 28px;     /* row buttons, icon buttons */
  --field-h: 36px;
}

:root[data-theme="night"] {
  --scheme: dark;
  --bg: #121214;
  --pop: #1C1C1F;
  --hover: #1A1A1D;
  --fill: #232327;
  --line: #2C2C31;
  --edge: #3A3A40;
  --edge-strong: #66666E;
  --ink: #E8E8EC;
  --ink-2: #A1A1A8;
  --reply: #4C8DF6;
  --on-reply: #0B1530;
  --reply-tint: #1A3257;
  --money: #74D69A;
  --money-tint: #173622;
  --money-solid: #1B6B3C;
  --on-money: #FFFFFF;
  --reg-check: #173622;
  --alert: #FF9A90;
  --on-alert: #121214;
  --fail-fill: #43201F;
  --fail-edge: #9C4B47;
  --fail-label: #FF9A90;
  --retry: #3A3A40;
  --on-retry: #E8E8EC;
  --chatter: #454365;
  --on-chatter: #E8E8EC;
  --chatter-label: #E4E2EE;
  --chatter-time: #C3C0DD;
  --dot: #A1A1A8;
  --select-ring: #66666E;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  --skeleton-a: #1E1E22;
  --skeleton-b: #26262B;
  --av-sand-bg: #3D3222;  --av-sand-fg: #E6C592;
  --av-stone-bg: #2F2F34; --av-stone-fg: #C6C6CE;
  --av-mauve-bg: #352D48; --av-mauve-fg: #D2C2F2;
  --av-rose-bg: #3E2A34;  --av-rose-fg: #E4B6CB;
  --av-clay-bg: #44291F;  --av-clay-fg: #F0B9A0;
  --av-slate-bg: #243249; --av-slate-fg: #B3C8EC;

  --warn: #F2B84B;
  --warn-tint: #3A2A10;

  /* colour language, night (the var() aliases above follow their night values) */
  --ok: #74D69A;              /* 7.45:1 on --ok-tint, 9.58:1 on --pop */
  --ok-tint: #173622;
  --info: #8AB4FF;            /* lighter than --reply: 6.14:1 on --info-tint */
  --info-tint: #1A3257;
  --idle-tint: var(--fill);   /* 6.10:1 */
  --canvas: var(--bg);        /* night keeps its ground: cards already lift off it */
  --canvas-ctl: var(--fill);
  --canvas-ctl-shadow: none;
  --id-meta: #8AB4FF;         /* 6.75:1 */
  --id-meta-tint: #172B4D;
  --id-tiktok: #FFFFFF;       /* still the black chip: 21:1 */
  --id-tiktok-tint: #000000;
  --id-tiktok-edge: #76767E;  /* 3.77:1 on --pop, 4.15:1 on --bg: the chip's outline */
  --id-bot: #B8A8FF;          /* 6.74:1 */
  --id-bot-tint: #2C2553;
  --id-dm: #6CD6C6;           /* 7.38:1 */
  --id-dm-tint: #0F3834;
  --id-channel: #E7A2F3;      /* 7.35:1 */
  --id-channel-tint: #3C1F46;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5);

  --edge-field: #8E8E93;    /* 5.21:1 on --pop, 5.74:1 on --bg */
  --nav-ground: var(--pop);
  --press-overlay: rgba(255, 255, 255, .08);

  --chart-revenue: #22C55E;
  --chart-roas: #22D3EE;
  --chart-leads: #3B82F6;
  --chart-cost: #F59E0B;
  --chart-c2l: #EF4444;
  --chart-spend: #8B5CF6;
  --chart-cpm: #06B6D4;
  --chart-paypal: #0EA5E9;
  --chart-new: #F472B6;      /* 6.42:1 on --pop; --chart-regs follows --money (9.58:1) */

  /* flow editor canvas, night only (ui/flows-editor.css). By day the editor keeps its own
     colours in chatflow.html, pixel for pixel. Every action line keeps its day hue: a dark
     tint of it as the row's ground, the hue as its 3px edge, a light shade as its words.
     Measured (contrast.py): words on their tint 8.3 to 12.9:1, edges on the card 3.8 to
     8.9:1, lines on --bg 4.4 to 6.5:1 and ports on the card 4.6 to 5.9:1. */
  --fe-card: var(--pop);          /* blocks: dark cards on --bg, --edge rim */
  --fe-card-edge: var(--edge);
  --fe-text-tint: #1A2333;    --fe-text-edge: #4C8DF6;                         /* words --ink 12.90 */
  --fe-typing-tint: #2A2A2F;  --fe-typing-edge: #76767E;                       /* words --ink-2 */
  --fe-delay-tint: #2E2513;   --fe-delay-edge: #F59E0B;   --fe-delay: #F2B84B; /* 8.44 */
  --fe-media-tint: #331A28;   --fe-media-edge: #EC4899;   --fe-media: #F5A3CB; /* 8.33 */
  --fe-tag-tint: #2A1F3D;     --fe-tag-edge: #A855F7;     --fe-tag: #D2B0FB;   /* 8.33 */
  --fe-cond-tint: #10292F;    --fe-cond-edge: #06B6D4;    --fe-cond: #7DD8EA;  /* 9.33 */
  --fe-verify-tint: #2D2A12;  --fe-verify-edge: #EAB308;  --fe-verify: #F0D35A; /* 9.76 */
  --fe-ai-tint: #16291D;      --fe-ai-edge: #22C55E;      --fe-ai: #74D69A;    /* 8.64 */
  /* connections and ports: the same meaning per colour as by day, without glare */
  --fe-line: #7A7A82;         /* next / continue: 4.40:1 on --bg */
  --fe-line-ok: #2EAD5E;      /* replied, match, advance: 6.46:1 */
  --fe-line-bad: #E0574F;     /* timeout, no match: 5.03:1 */
  --fe-line-warn: #D4A20A;    /* max messages: 7.99:1 */
  --fe-port-edge: #8E8E93;    /* 5.21:1 on the card, 5.74:1 on --bg */
  /* the editor's top bar buttons and palette, night versions of the same buttons */
  --fe-btn: #2A5298;          /* Undo / Redo: white 7.61:1 */
  --fe-btn-hover: #315DA8;
  --fe-save: #15803D;         /* white 5.02:1 */
  --fe-save-hover: #116932;   /* white 6.79:1 */
  --fe-analytics: #563A85;    /* white 8.98:1 */
  --fe-analytics-on: #7447C9; /* white 6.02:1 */
  --fe-skip: #2B3240;         /* --ink 10.52:1; ON is --bad-solid, white 5.62:1 */
}

/* Increase Contrast (iOS setting / prefers-contrast) */
@media (prefers-contrast: more) {
  :root {
    --line: #8E8E93;
    --edge: #8E8E93;
    --edge-strong: #8E8E93;
    --fill: #E3E3E8;
    --ink-2: #4A4A4F;
  }
  :root[data-theme="night"] {
    --line: #8E8E93;
    --edge: #8E8E93;
    --edge-strong: #8E8E93;
    --ink-2: #C7C7CC;
  }
}

/* Touch: controls grow to 44px */
@media (pointer: coarse) {
  :root {
    --control-h: 44px;
    --control-h-sm: 44px;
    --field-h: 44px;
  }
}