/* MazaLabs design tokens (--ml-*). One source for the Flask shell; mirrored in
   website-builder-v2/app/ml-tokens.css. Light is the default; html[data-theme="dark"]
   redefines the same names. See DESIGN.md. */
:root {
  /* Frame: the dark sidebar, editor chrome and ask bar. Dark in both themes. */
  --ml-frame: #0b0f0c;
  --ml-frame-2: #121813;
  --ml-frame-hover: #18201a;
  --ml-frame-line: #212923;
  --ml-frame-ink: #e8ede8;
  --ml-frame-ink-2: #929f95;

  /* Desk and paper: the work canvas. */
  --ml-desk: #f5f6f2;
  --ml-paper: #fcfdfa;
  --ml-ink: #17201a;
  --ml-ink-2: #5a645d;
  --ml-ink-3: #67706a; /* 4.7:1 on paper-2; #8a938c read 2.9:1 */
  --ml-line: #e0e4dd;
  --ml-line-2: #ccd3c9;

  /* Brand green: fills use --ml-green with --ml-green-ink text; green text uses --ml-green-text. */
  --ml-green: #22c55e;
  --ml-green-hover: #1fb455;
  --ml-green-ink: #04130a;
  --ml-green-text: #157a3a;
  --ml-green-wash: #e6f5ea;

  /* Semantic washes (status pills, notices). */
  --ml-amber-wash: #fbf0d9;
  --ml-amber-text: #835600;
  --ml-blue-wash: #e5eefa;
  --ml-blue-text: #1c5a9f;
  --ml-red-wash: #fbe6e3;
  --ml-red-text: #9e3129;
  --ml-gray-wash: #edefea;
  --ml-gray-text: #4d5851;

  --ml-focus: 0 0 0 2px var(--ml-paper), 0 0 0 4px #22c55e;
  --ml-shadow-pop: 0 1px 2px rgb(10 20 12 / 0.06), 0 12px 32px rgb(10 20 12 / 0.12);

  --ml-font: "Onest", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ml-font-ar: "IBM Plex Sans Arabic", "Onest", system-ui, -apple-system, sans-serif;
  --ml-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ml-r-sm: 6px;
  --ml-r-md: 10px;
  --ml-r-lg: 14px;

  --ml-side-w: 236px;
  --ml-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-theme="dark"] {
  --ml-frame: #080b09;
  --ml-frame-2: #0f1410;
  --ml-frame-hover: #151c17;
  --ml-frame-line: #1d241f;
  --ml-frame-ink: #e8ede8;
  --ml-frame-ink-2: #8f9c92;

  --ml-desk: #0f1410;
  --ml-paper: #161c17;
  --ml-ink: #e7ece7;
  --ml-ink-2: #9ba79f;
  --ml-ink-3: #808b83; /* 4.9:1 on paper, 4.3:1 on gray-wash; #6f7a72 read 3.9:1 */
  --ml-line: #252d27;
  --ml-line-2: #323b34;

  --ml-green-text: #4ade80;
  --ml-green-wash: #11301c;

  --ml-amber-wash: #36280c;
  --ml-amber-text: #f0c46c;
  --ml-blue-wash: #12253a;
  --ml-blue-text: #8ebff3;
  --ml-red-wash: #3a1613;
  --ml-red-text: #f09a91;
  --ml-gray-wash: #202822;
  --ml-gray-text: #b3beb6;

  --ml-shadow-pop: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}