/*
 * THE theme file (DL-14). Every colour, font, radius and spacing value the
 * dashboard uses lives here, so Claude Design can restyle the app without
 * touching the logic. Brand cues from meetami.ai (DL-11): Figtree, the
 * blue-to-pink gradient, near-black ink.
 *
 * Light by default; [data-theme="dark"] on <html> switches (DL-10).
 */
:root {
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --brand-1: #2772F9;
  --brand-2: #FF2585;
  --grad: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  --grad-soft: linear-gradient(90deg, rgba(39,114,249,.10), rgba(255,37,133,.10));
  --grad-avatar: linear-gradient(135deg, rgba(39,114,249,.16), rgba(255,37,133,.16));

  --bg: #ffffff;            /* the page */
  --panel: #f6f7f9;         /* soft grey zones (DL-07) */
  --panel-2: #eef0f4;
  --card: #ffffff;
  --border: #e6e8ee;
  --border-strong: #d3d7e0;
  --ink: #0b0c0f;
  --ink-2: #3a3f4b;
  --muted: #5f6573;
  --faint: #9aa0ad;
  /* the conversion score dial, as on the lead-magnet report */
  --needle: #000000; --needle-mid: #1a1a1a; --score-outof: #808693;   /* the report uses #9ca3af; this is a shade darker for 3:1 contrast */

  --good: #12a150;  --good-bg: #e7f6ee;
  --warn: #c77700;  --warn-bg: #fff4e0;
  --bad:  #d92d54;  --bad-bg:  #fde8ee;
  --info: #2772F9;  --info-bg: #e8f0fe;  --info-ink: #1a4fb8;   /* text on --info-bg: 6.6:1 (the Managed by Ami badge) */
  --idle: #9aa0ad;
  /* Text-safe shades (WCAG AA 4.5:1 on white and on the grey panels): links,
     small brand text, and words on the green / amber / red tints. */
  --link: #1f5fd6;
  --good-ink: #0b7a3b; --warn-ink: #8f5400; --bad-ink: #b3123e;

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg: 0 24px 64px rgba(16,24,40,.18);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --text-xs: 12px; --text-sm: 14px; --text: 15px; --text-lg: 18px;
  --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px;

  --sidebar-w: 232px;
  --sidebar-w-collapsed: 72px;
  --content-max: 1080px;
  --topbar-h: 64px;

    /* The side panel's pictures (a shop's page with Ami's chat, as shoppers see it): fixed colours, the same in dark mode */
  --shop-bg: #fff; --shop-ink: #1d1f24; --shop-muted: #6b7180; --shop-muted-2: #5b6170; --shop-cursor: #0b0c0f;
  --shop-line: #e4e6eb; --shop-line-2: #e3e5ea; --shop-rule: #eceef2; --shop-brand: #2e3348; --shop-panel: #f6f7f9; --shop-chip: #f1f1f5;
  --shop-ph-1: #eef0f3; --shop-ph-2: #e2e5ea; --shop-bar: #e8eaee; --shop-bar-2: #d5d8de; --shop-bar-3: #c9ccd3; --shop-dot: #b8bcc8;
  /* v8.1 Home: the Ami Buyer Framework table's With Ami / Ami fully set up columns, tinted as on the audit report */
  --bf-ami-bg: #f7f4ff; --bf-full-bg: #f1ecff; --bf-ami-ink: #6b3fd6; --bf-n-bg: #f1f2f6;
  --bf-total-bg: linear-gradient(90deg, #eef3ff, #fff0f6);
  --switch-on: #2772F9;
  --switch-off: #cfd3dc;
  --switch-thumb: #ffffff;
  --on-brand: #ffffff;      /* text on the gradient and on solid status colours */
  --code-bg: #0b0c0f;
  --code-ink: #e8eaf0;
  --frame-bg: #ffffff;      /* behind the customer's page in the preview */
  --device: #0b0c0f;        /* the phone frame around the customer's page (dark in both modes) */
  /* "Continue with Google / Microsoft": the colours Google's button rules set (Microsoft's allow the same) */
  --social-bg: #ffffff; --social-bg-hover: #f2f2f2; --social-ink: #1f1f1f; --social-line: #747775;

  /* Chart series (validated palette: fixed order, colourblind-checked). */
  --series-1: #2a78d6;   /* pages */
  --series-2: #eb6834;   /* PDF */
  --series-3: #1baf7a;   /* Word */
  --series-4: #eda100;   /* text */
}

[data-theme="dark"] {
  --score-outof: #9097a5;
  --social-bg: #131314; --social-bg-hover: #1f1f21; --social-ink: #e3e3e3; --social-line: #8e918f;
  --bg: #0b0c0f;
  --panel: #15171c;
  --panel-2: #1c1f26;
  --card: #111318;
  --border: #262a33;
  --border-strong: #353a45;
  --ink: #f3f4f7;
  --ink-2: #c9ccd4;
  --muted: #9097a5;
  --faint: #6b7180;
  --good-bg: #0f2a1c; --warn-bg: #2b2210; --bad-bg: #2d121b; --info-bg: #0f1d36;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  --switch-off: #3a3f4b;
  --bf-ami-bg: #19152b; --bf-full-bg: #211a3a; --bf-ami-ink: #b9a2ff; --bf-n-bg: #22252d;
  --bf-total-bg: linear-gradient(90deg, rgba(39,114,249,.16), rgba(255,37,133,.16));
  --link: #7aaeff;
  --good-ink: #4cd68a; --warn-ink: #f2b552; --bad-ink: #ff7a9a; --info-ink: #8db4ff;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}