/*
 * AgentsNet design tokens.
 *
 * The palette mirrors the desktop AgentsNet tokens
 * (apps/agentsnet-desktop/src/styles/tokens.css) so the phone shares the same
 * visual identity, plus a mobile-oriented spacing / radius / safe-area scale.
 * Dark is the default; a light ("day") theme is provided for parity.
 *
 * ## The shared v6 contract (U-1 / U-2)
 *
 * `docs/design/agentsnet-v6-desktop-mock/design-tokens.md` is the SoT both the
 * Desktop and this app draw from, and §7.5 makes it load-bearing rather than
 * cosmetic: the approval card, the presence dot, and the unread badge must mean
 * the same thing on both screens, token for token. A phone that paints "waiting
 * for you" in a different colour than the desktop is a phone the owner has to
 * re-learn.
 *
 * Tokens marked [v6] arrived with that contract. Mobile deviates from it in
 * SIZE only (contract §6: touch targets ≥44px, type +0.5px) and never adds a
 * palette of its own — a new colour is registered in design-tokens.md with BOTH
 * theme values before it may appear here.
 */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1a16;
  --bg-2: #0b120e;
  --panel: #152219;
  --panel-2: #18271e;
  --panel-3: #1d3028;
  --rail: #0c1512;
  --line: #24372e;
  --line-2: #1a2a22;
  --hair: #1a2a22;
  --text: #e8f1ec;
  --text-2: #c3d3ca;
  --muted: #8fa69b;
  --faint: #5d7a6c;
  --green: #4caf50;
  --green-2: #3d8b40;
  --green-ink: #5ec269;
  --green-tint: rgba(76, 175, 80, 0.14);
  --green-glow: 0 0 16px rgba(76, 175, 80, 0.46);
  --blue: #4a9bd9;
  --blue-ink: #74b3e0;
  --blue-tint: rgba(74, 155, 217, 0.14);
  --teal: #26a69a;
  --sea: #6bc5b8;
  --amber: #f1c242;
  --amber-ink: #f1c242;
  --amber-tint: rgba(241, 194, 66, 0.16);
  --amber-bd: #55421a;
  --amber-bg: #2a2412;
  --danger: #f87171;
  --danger-ink: #f87171;
  --danger-tint: rgba(248, 113, 113, 0.14);
  --gold: #c8a24b;
  --grad-green: linear-gradient(160deg, #55d48d, #42c87d);
  /* [v6] primary-button ink. The design has always drawn one; the product had
     no token for it, so callers hard-coded a near-black. */
  --on-green: #08130d;
  --nav-on-bg: linear-gradient(135deg, #1d3a28, #16281d);
  --nav-on-line: #2f5140;
  --scrim: rgba(4, 8, 6, 0.62);
  --glass: rgba(12, 21, 18, 0.76);
  --input-bg: #0f1a16;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.46);

  /* [v6] Identity palette (contract §2). Each ANbot draws a stable hue at
     recruitment and keeps it for life, so the same teammate is the same colour
     on the phone and the desktop. GREEN IS NEVER AN IDENTITY HUE — it is
     reserved for presence and actions, and an ANbot tinted green would read as
     "on duty" no matter what its dot said. */
  --id-blue: #5ea8e0;
  --id-blue-tint: rgba(94, 168, 224, 0.16);
  --id-teal: #3db3a5;
  --id-teal-tint: rgba(61, 179, 165, 0.16);
  --id-violet: #a68ce0;
  --id-violet-tint: rgba(166, 140, 224, 0.16);
  --id-amber: #dfae52;
  --id-amber-tint: rgba(223, 174, 82, 0.16);
  --id-rose: #e08ba6;
  --id-rose-tint: rgba(224, 139, 166, 0.16);
  --id-slate: #8ea3b8;
  --id-slate-tint: rgba(142, 163, 184, 0.16);

  /* [v6] Presence (contract §3 = the §8.3 vocabulary's visual spec). Four
     states, four DIFFERENT shapes — solid / weakened / hollow / dashed — so the
     reading survives a colour-blind eye and a glance. "Unknown" keeps its own
     shape rather than borrowing "off duty": the phone does not know, and
     drawing a guess is the one thing the projection must never do. */
  --presence-on: #4caf50;
  --presence-recent: rgba(76, 175, 80, 0.55);
  --presence-off: #5d7a6c;
  --presence-unknown: #79857f;
}

[data-theme="day"] {
  color-scheme: light;
  --bg: #f7faf9;
  --bg-2: #eef5f3;
  --panel: #ffffff;
  --panel-2: #f3f8f6;
  --panel-3: #eef5f3;
  --rail: #eef5f3;
  --line: #d4e0dc;
  --line-2: #e6ede9;
  --hair: #e6ede9;
  --text: #1a2e28;
  --text-2: #35473f;
  --muted: #5d6e66;
  --faint: #4f6259;
  /* Day needs its OWN action green: #4caf50 on white fails contrast for text
     and small marks, which is why the contract darkens the whole green family
     here rather than only the "ink" variant. */
  --green: #2e7d32;
  --green-2: #3d8b40;
  --green-ink: #236b32;
  --green-tint: rgba(76, 175, 80, 0.12);
  --green-glow: 0 2px 12px rgba(76, 175, 80, 0.28);
  --blue-ink: #2f78b8;
  --blue-tint: rgba(74, 155, 217, 0.12);
  --teal: #26a69a;
  --sea: #2f9e91;
  --amber: #e6a817;
  --amber-ink: #8a5a00;
  --amber-tint: #fff8e6;
  --amber-bd: #f1d88a;
  --amber-bg: #fff8e6;
  --danger: #dc2626;
  --danger-ink: #c0392b;
  --danger-tint: rgba(220, 38, 38, 0.1);
  --gold: #785900;
  --grad-green: linear-gradient(160deg, #2e7d32, #256b2a);
  --on-green: #ffffff;
  --nav-on-bg: linear-gradient(135deg, #e3f2e5, #d4ead7);
  --nav-on-line: #a9d3ae;
  --scrim: rgba(26, 46, 40, 0.32);
  --glass: rgba(255, 255, 255, 0.8);
  --input-bg: #f3f8f6;
  --shadow-sm: 0 2px 8px rgba(26, 46, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 46, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(26, 46, 40, 0.12);

  /* [v6] identity palette — day values (contract §2). */
  --id-blue: #2f78b8;
  --id-blue-tint: rgba(47, 120, 184, 0.12);
  --id-teal: #1f8a7f;
  --id-teal-tint: rgba(31, 138, 127, 0.12);
  --id-violet: #7a5cc4;
  --id-violet-tint: rgba(122, 92, 196, 0.12);
  --id-amber: #a06b00;
  --id-amber-tint: rgba(160, 107, 0, 0.12);
  --id-rose: #b8496e;
  --id-rose-tint: rgba(184, 73, 110, 0.12);
  --id-slate: #5c7186;
  --id-slate-tint: rgba(92, 113, 134, 0.12);

  /* [v6] presence — day values (contract §3). */
  --presence-on: #2e7d32;
  --presence-recent: rgba(46, 125, 50, 0.55);
  --presence-off: #8aa096;
  --presence-unknown: #93a09a;
}

:root {
  /* Spacing + radius per contract §5. Both scales are shared with the Desktop
     verbatim; only the touch-target floor below is mobile-specific. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* [v6] radius scale. The `--radius*` names are kept as ALIASES rather than
     replaced: they are spelled across mobile.css and the platform overrides
     below, and a rename would have been a diff with no design in it. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --radius-sm: var(--r-sm);
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --tap: 44px; /* minimum comfortable touch target */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Left/right insets matter in landscape (side notch / sensor housing) and on
     curved-edge displays; 0 in portrait, so harmless there. */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --font: "Avenir Next", "Avenir Next World", Avenir, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --platform-bar-filter: blur(16px);
  --platform-press-scale: 0.98;
  --platform-sheet-ease: ease-out;
  --platform-sheet-duration: 220ms;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}

html.platform-ios {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Avenir Next",
    "Avenir Next World", Avenir, "Segoe UI", system-ui, sans-serif;
  --platform-bar-filter: saturate(180%) blur(20px);
  --platform-press-scale: 0.97;
  --platform-sheet-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --platform-sheet-duration: 240ms;
}

html.platform-android {
  --font: Roboto, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    "Avenir Next", sans-serif;
  --radius: 18px;
  --radius-lg: 24px;
  --platform-bar-filter: blur(14px);
  --platform-press-scale: 0.99;
  --platform-sheet-ease: cubic-bezier(0.2, 0, 0, 1);
  --platform-sheet-duration: 260ms;
}