/* ─────────────────────────────────────────────────────────
   Mocca Design System — Colors & Type
   Teal-navy/cyan system. Light + Dark are designed token sets.
   RTL-safe (use logical properties when possible).
   ───────────────────────────────────────────────────────── */

/* Typography — Hanken Grotesk for display/ui (warmer & more humanist than
   the old geometric Poppins, Pablo 2026-06-18), JetBrains Mono for code */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ──────── BASE TOKENS (theme-independent) ──────── */
:root {
  /* Brand — teal-navy + cyan pair */
  --mk-navy-900: #0D2530;
  --mk-navy-800: #152E3F;
  --mk-navy-700: #22526A;   /* primary teal-navy */
  --mk-navy-600: #2E6985;
  --mk-navy-500: #4286A2;

  --mk-blue-500: #028E90;   /* dark-mode accent (deeper) */
  --mk-blue-400: #03C9CB;   /* PRIMARY ACCENT */
  --mk-blue-300: #4DDEDE;
  --mk-blue-200: #A8EDED;

  --mk-teal-500: #02A5A7;
  --mk-teal-400: #14B8A6;   /* SECONDARY ACCENT — distinct teal (was #03C9CB ≡ primary cyan) */
  --mk-teal-300: #5DE4E5;

  --mk-neutral-050: #F9FAFB;
  --mk-neutral-100: #F3F4F6;
  --mk-neutral-200: #E5E7EB;
  --mk-neutral-300: #D1D5DB;
  --mk-neutral-400: #9CA3AF;
  --mk-neutral-500: #6B7280;
  --mk-neutral-600: #4B5563;
  --mk-neutral-700: #374151;
  --mk-neutral-800: #1F2937;
  --mk-neutral-900: #111827;

  /* Semantic (theme-neutral) */
  --mk-success: #22C55E;
  --mk-warning: #F59E0B;   /* true caution/warn semantic (console, health, alerts) — stays amber */
  --mk-danger:  #DC2626;   /* red-600 — white text 4.84:1 (was #EF4444 → 3.77:1) */
  /* "debt / expense / money-out" accent — NOT a warning. Pablo 2026-06-01:
     burnt amber read dated and clashed with the cyan, so the money-out
     series + amounts use a neon pink-coral that pops against blue/teal. */
  --mk-debt: #FF4D8D;
  --mk-info:    var(--mk-blue-400);

  /* Environment accents — centralized (were duplicated as literals).
     Staging recolors shell chrome green; Preview recolors it purple so the
     "viewing as another user / point in time" mode is never mistaken for a
     live session (Pablo 2026-06-02 W3 #5). */
  --mk-staging:      #2BD9A8;   /* staging env indicator green — brightened
                                   from #1AB394 to match the preview-purple
                                   treatment (Pablo 2026-06-11) */
  --mk-staging-deep: #1A6A5C;   /* staging brand-bg */
  --mk-preview:      #C084FC;   /* preview env indicator purple — brightened
                                   from #A855F7, which got lost against the
                                   navy light-theme logo tile (Pablo 2026-06-11) */
  --mk-preview-deep: #7C3AED;   /* preview brand-bg / deep */

  /* Radii */
  --mk-radius-sm: 8px;
  --mk-radius-md: 12px;
  --mk-radius-lg: 18px;   /* primary card radius */
  --mk-radius-xl: 24px;
  --mk-radius-pill: 999px;

  /* Spacing — 4px base */
  --mk-s-1: 4px;
  --mk-s-2: 8px;
  --mk-s-3: 12px;
  --mk-s-4: 16px;
  --mk-s-5: 24px;
  --mk-s-6: 32px;
  --mk-s-7: 48px;
  --mk-s-8: 64px;

  /* Layout constants (from V7 inspiration) */
  --mk-sidebar-w: 232px;
  --mk-sidebar-narrow: 72px;
  --mk-nav-h: 58px;
  /* B46 C01 (Pablo: "inconsistency in the width of some panels") — ONE width
     for every slide-in panel: filter/entity/wallet/chart panels, the component
     editor, and the assistant. Below the tablet breakpoint every panel goes
     full-screen (media queries in panels.css / components-lab.css). */
  --mk-panel-w: 560px;
  --mk-tabbar-h: 62px;

  /* Motion */
  --mk-ease: cubic-bezier(.4,.0,.2,1); /* @kind other */
  --mk-t-fast: 150ms var(--mk-ease); /* @kind other */
  --mk-t-base: 200ms var(--mk-ease); /* @kind other */
  --mk-t-slow: 300ms var(--mk-ease); /* @kind other */

  /* Component-local defaults (registered here so the compiler classifies them;
     real values are overridden on the relevant component selectors). */
  --wordmark-color: var(--mk-navy-700); /* @kind color */
  --rest-opacity: 1; /* @kind other */

  /* Type families */
  --mk-font-ui: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Pablo (standing, re-confirmed B12 C05): no robotic/monospace font ANYWHERE
     in the prototype. The mono token now resolves to the UI font so every
     data-key / token / id / kbd reads in Hanken Grotesk. Tabular alignment is
     preserved separately via font-variant-numeric where it matters. */
  --mk-font-mono: var(--mk-font-ui);
  --mk-font-ar: 'Tahoma', 'Poppins', sans-serif;
  /* Poppins is retained only for the brand wordmark, not UI text. */
  --mk-font-brand: 'Poppins', var(--mk-font-ui);
}

/* ──────── LIGHT THEME (designed) ──────── */
:root,
[data-theme="light"] {
  --fg-1: #0E1621;                /* primary text */
  --fg-2: #4B5563;                /* secondary */
  --fg-3: #5B6472;  /* B62 — was #9CA3AF: 2.54:1 on white, 2.37 on --bg-2, 2.05 on a
                                     border-tinted ground. The token is used ~280 times in
                                     sections.css alone as QUIET TEXT — section-header rules
                                     (.wl-fee-note), form labels (.wl-frow label), row subtitles,
                                     table headers, timestamps — so the defect was never a
                                     selector, it was the value: everything quiet in the app was
                                     below body-scale contrast in both themes. Darkened to clear
                                     4.5:1 on every ground it lands on (5.98 / 5.58 / 4.83) while
                                     staying clearly a third step below --fg-2. Genuinely
                                     decorative text keeps --fg-4. § M-43. */                /* tertiary / disabled */
  --fg-invert: #FFFFFF;

  --bg-1: #FFFFFF;                /* canvas */
  --bg-2: #F6F7F9;                /* elevated surface */
  --bg-3: #EFF2F6;                /* subtle panel */
  --bg-input: #F3F4F6;

  --sidebar: var(--mk-navy-700);
  --sidebar-deep: var(--mk-navy-900);
  --sidebar-fg: #ECEEEE;
  --sidebar-fg-muted: rgba(236,238,238,.65);

  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  /* B46 P6-24 — `--bd-1` was NEVER defined anywhere, yet ~100 rules use it as
     a border colour with a hard-coded LIGHT-grey fallback. Every one of them
     therefore painted a light border regardless of theme (97 measured on the
     dark background). Defining it per theme retires all those fallbacks at
     once; it is the same value as --border, which is what they all meant. */
  --bd-1: #E5E7EB;
  --divider: #EEF0F3;
  /* B46 P6-25 — the OTHER undefined tokens. Same bug class as --bd-1, but these
     are TEXT colours, so an unadaptive fallback is a CONTRAST failure, not just
     a tint: `--mk-ok`'s #2f9e63 gave the wallet's positive amounts 3.39:1 on
     white (14px/800 = normal text, AA needs 4.5:1). Defined per theme, each
     measured against --bg-1. */
  --mk-ok: #157F4C;               /* 5.02:1 on #FFFFFF */
  --mk-err: #B3261E;              /* 6.04:1 */
  --warn: #8A6100;                /* 5.09:1 — amber is unreadable as light text */
  --mk-warn: #8A6100;
  --muted: #6B7280;               /* 5.10:1 */
  --fg-4: #8A939E;                /* non-essential meta only */
  --mk-accent: var(--accent-text);
  /* --mk-danger/--mk-debt ARE defined but shared across themes; the money-out
     amounts need a darker red on white. */
  --mk-danger: #C81E1E;           /* 5.42:1 on #FFFFFF (was #DC2626 → 4.83:1) */
  /* Money-out pink as TEXT. Same fills-vs-text split as --accent/--accent-text:
     #FF4D8D is a great chart/fill colour but only 3.14:1 on white, so small
     amounts (13px) failed AA. Keep --mk-debt for FILLS, use this for text. */
  --mk-debt-text: #C2185B;        /* 5.72:1 on #FFFFFF */

  --accent: var(--mk-blue-400);
  --accent-2: var(--mk-teal-400);
  --accent-fg: #FFFFFF;           /* white text on filled cyan buttons / badges (Pablo 2026-06-01 — navy ink read "weird") */
  /* B62 — six live rules (the Content vote button, the map search Go, the CV
     language pills, the card ribbon, the condition badge) read
     var(--accent-contrast,#fff) for the SAME thing --accent-fg already names,
     and the token was never defined — so every one of them silently used the
     bare #fff fallback instead of the app's on-accent ink. It is an alias now,
     which means Pablo's 2026-06-01 decision about that ink governs all six
     from one place instead of five copies of a hard-coded white. */
  --accent-contrast: var(--accent-fg);
  /* Accent used as TEXT/ICON on a light page surface. Bright cyan
     (#03C9CB) only hits ~2.5:1 on white — fails WCAG AA. This darkened
     brand cyan clears 4.5:1 on white (5.29:1) and on --bg-2 (4.93:1).
     Use for meaningful accent text: operators, +AND/+OR, links, icons.
     Keep --accent for FILLS (CTAs, badges, chart strokes). (VisualQA F1, 2026-06-08) */
  --accent-text: #03787A;
  --accent-soft: color-mix(in srgb, var(--mk-blue-400) 14%, transparent);

  --ring: color-mix(in srgb, var(--mk-blue-400) 35%, transparent);
  --scrim: rgba(15,25,38,.48);

  --shadow-xs: 0 1px 2px rgba(13,37,48,.04);
  --shadow-sm: 0 1px 3px rgba(13,37,48,.06), 0 1px 2px rgba(13,37,48,.04);
  --shadow-md: 0 8px 24px rgba(13,37,48,.08), 0 2px 4px rgba(13,37,48,.04);
  --shadow-lg: 0 20px 48px rgba(13,37,48,.14);
  --shadow-pop: 0 12px 32px rgba(13,37,48,.18);   /* menus / popovers / FAB menu */
}

/* ──────── DARK THEME (designed, not inversion) ──────── */
[data-theme="dark"] {
  --fg-1: #ECEEEE;
  --fg-2: #A7B0B8;
  --fg-3: #939DA9;  /* B62 — was #6B7480: 3.88:1 on --bg-1. Now 6.68 / 6.02. */
  --fg-invert: #0B1520;
  --wordmark-color: var(--mk-neutral-100); /* @kind color */

  --bg-1: #0B1520;                /* canvas — deep ink */
  --bg-2: #10202E;                /* elevated */
  --bg-3: #16293A;                /* panel */
  --bg-input: #17293A;

  --sidebar: #0B1520;             /* sidebar is darkest in dark mode */
  --sidebar-deep: #06101A;
  --sidebar-fg: #ECEEEE;
  --sidebar-fg-muted: rgba(236,238,238,.55);

  --border: #1E3044;
  --border-strong: #2A4663;
  --bd-1: #1E3044;
  --divider: #162332;
  /* B46 P6-25 — dark-theme values for the same tokens, measured against the
     #0B1520 canvas. The reds/greens must go LIGHTER here, not darker. */
  --mk-ok: #3DD68C;               /* 9.13:1 on #0B1520 */
  --mk-err: #FF6B6B;              /* 6.51:1 */
  --warn: #F5B942;                /* 9.90:1 */
  --mk-warn: #F5B942;
  --muted: #9AA5B1;               /* 7.32:1 */
  --fg-4: #7C8794;
  --mk-accent: var(--accent-text);
  --mk-danger: #FF6B6B;           /* 6.51:1 (was #DC2626 → 3.81:1 FAIL) */
  --mk-debt: #FF6FA5;             /* money-out pink, lightened for dark */
  --mk-debt-text: #FF8FB8;        /* 8.4:1 on #0B1520 */

  --accent: var(--mk-blue-400);
  --accent-2: var(--mk-teal-400);
  --accent-fg: #FFFFFF;           /* match light: white on filled cyan (Pablo 2026-06-01) */
  --accent-contrast: var(--accent-fg);
  /* Dark surfaces already give bright cyan ~6.9:1 — accent text stays the
     brand cyan here (only light theme needs the darkened variant). */
  --accent-text: var(--mk-blue-400);
  --accent-soft: color-mix(in srgb, var(--mk-blue-400) 18%, transparent);

  --ring: color-mix(in srgb, var(--mk-blue-400) 45%, transparent);
  --scrim: rgba(0,0,0,.6);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 10px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
  --shadow-pop: 0 14px 36px rgba(0,0,0,.55);   /* menus / popovers / FAB menu */
}

/* ──────── TYPE SCALE ──────── */
html { font-family: var(--mk-font-ui); color: var(--fg-1); background: var(--bg-1); }
html[dir="rtl"] { font-family: var(--mk-font-ar); }

.mk-display-1 { font-size: 64px; line-height: 1.02; font-weight: 800; letter-spacing: -.03em; }
.mk-display-2 { font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -.025em; }
.mk-h1        { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.mk-h2        { font-size: 24px; line-height: 1.2;  font-weight: 700; letter-spacing: -.015em; }
.mk-h3        { font-size: 18px; line-height: 1.3;  font-weight: 600; letter-spacing: -.01em; }
.mk-body-lg   { font-size: 16px; line-height: 1.55; font-weight: 400; }
.mk-body      { font-size: 14px; line-height: 1.55; font-weight: 400; }
.mk-body-sm   { font-size: 13px; line-height: 1.5;  font-weight: 400; }
.mk-caption   { font-size: 12px; line-height: 1.4;  font-weight: 500; color: var(--fg-2); }
.mk-micro     { font-size: 11px; line-height: 1.3;  font-weight: 600; letter-spacing: .06em; text-transform:none; color: var(--fg-2); }
.mk-mono      { font-family: var(--mk-font-mono); font-size: 13px; }

/* Semantic element defaults */
h1 { font: 700 32px/1.15 var(--mk-font-ui); letter-spacing: -.02em; }
h2 { font: 700 24px/1.2 var(--mk-font-ui); letter-spacing: -.015em; }
h3 { font: 600 18px/1.3 var(--mk-font-ui); letter-spacing: -.01em; }
p  { font: 400 14px/1.55 var(--mk-font-ui); color: var(--fg-1); }
code, kbd, pre { font-family: var(--mk-font-mono); font-size: 13px; }
small { font-size: 12px; color: var(--fg-2); }

/* Shadow aliases. `.emoji-pop` and `.msg-acts` in sections.css ask for
   `--mk-shadow-lg` / `--mk-shadow-sm`, which were never defined anywhere — both
   resolved to empty, so those two surfaces rendered with NO shadow at all. They
   alias the real tokens rather than introducing new values. */
:root{
  --mk-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(13,37,48,.08));
  --mk-shadow-md: var(--shadow-md, 0 6px 16px -6px rgba(13,37,48,.18));
  --mk-shadow-lg: var(--shadow-lg, 0 18px 40px -14px rgba(13,37,48,.28));
}

/* ──────── ROUNDED-CROP PRINCIPLE (B51-04, Pablo 2026-08-19) ────────
   "I'm not a fan of having a square inside of a rounded border div, it looks
   broken or not professional. I rather having the whole div cropped in the
   rounded corner without seeing the square sides showing up. Let's implement
   this principle across the whole prototype."
   A filled child that IS the surface of a rounded control must be cropped BY
   that control, never inset inside it. Native colour inputs are the worst
   offender (the UA paints a square swatch inside a padded box), so they are
   normalised here, once, for every colour control in the prototype — the chart
   editor's `.ce-color`, the condition builder's `.cb-color-native` and the icon
   builder's `.ic-cp-native`. `border-radius:inherit` keeps each control's own
   radius, so this never forces one shape on all of them. */
:where(input[type="color"]){
  -webkit-appearance:none;appearance:none;
  padding:0;border:1px solid var(--border);background:none;
  border-radius:9px;overflow:hidden;cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0;border:0;border-radius:inherit}
input[type="color"]::-webkit-color-swatch{border:0;border-radius:inherit}
input[type="color"]::-moz-color-swatch{border:0;border-radius:inherit}
/* Same principle for any media that fills a rounded frame: the frame clips, the
   child inherits the radius. Opt in with `.mk-crop` on the frame. */
.mk-crop{overflow:hidden}
.mk-crop > img,.mk-crop > canvas,.mk-crop > video,.mk-crop > svg{border-radius:inherit;display:block}


/* B65 W2 — every Mocca map draws keyless OpenStreetMap tiles (CARTO now watermarks
   keyless requests, 065-074). `.mk-tiles` calms the raw layer to the app's quiet
   basemap; dark theme inverts it. `.mk-tiles-raw` is MapView's colour layer. The
   attribution OSM requires stays, small, bottom-right. */
.mk-tiles{filter:grayscale(.85) contrast(.92) brightness(1.06)}
[data-theme="dark"] .mk-tiles{filter:invert(1) hue-rotate(180deg) grayscale(.9) brightness(.85) contrast(.9)}
.leaflet-control-attribution.leaflet-control{font:500 9.5px/1.5 var(--font-ui,system-ui),system-ui,sans-serif;padding:0 5px;border-radius:6px 0 0 0;background:color-mix(in srgb,var(--bg-1,#fff) 70%,transparent);color:var(--fg-3,#667);opacity:.85}
.leaflet-control-attribution.leaflet-control a{color:inherit}

/* Audit A (B65): phone numbers read left-to-right in Arabic too — "+961 3 555 018" rendered as "018 555 3 961+" in
   the RTL contact panel. Isolated so the surrounding RTL line order is untouched. */
.ct-ph > span:not(.mi), a[href^="tel:"], [data-phone], .num-ltr { direction:ltr; unicode-bidi:isolate; }