/*
 * Prajna skin socket — token layer (W4 BrowserBridge).
 *
 * The design authority is DESIGN.md: "quiet premium intelligence" — neutral
 * monochrome base, ONE deep-indigo accent, light + dark both first-class,
 * platform-native type, soft radius, one real-state motion cue.
 *
 * This file is the SOCKET, not the visual pass. It only *declares* tokens as
 * CSS custom properties for the Prajna shell to consume over the unmodified
 * renderer. The full pass (mapping tokens onto renderer surfaces) waits for the
 * product layer.
 *
 * HARD RULE (DESIGN.md §3 / directive): keep the renderer's spacing rhythm
 * untouched — RESTYLE, NEVER RE-SPACE. This layer deliberately defines NO
 * margin / padding / gap / width tokens. Color, type, radius, motion only.
 *
 * Themes: light default; dark is the renderer's home mood. Both the OS setting
 * (prefers-color-scheme) and an explicit [data-theme] stamp are honored, and
 * the explicit stamp wins so the renderer's own theme toggle stays authoritative.
 * WCAG AA contrast is the floor for every text/background pairing below.
 */

:root {
  /* ---- neutral base (light) — pure, warm-free ---- */
  --prajna-bg: #ffffff;
  --prajna-surface: #f6f6f7;
  --prajna-surface-raised: #ffffff;
  --prajna-text: #0a0a0a;            /* near-black on white */
  --prajna-text-muted: #6e6e73;      /* ~5.0:1 on --prajna-bg */
  --prajna-border: #e4e4e7;

  /* ---- signature accent — deep indigo, used sparingly ---- */
  --prajna-accent: #4338ca;          /* primary buttons, active/focus, links, badges, working cue */
  --prajna-accent-hover: #3730a3;
  --prajna-accent-contrast: #ffffff; /* text/icon ON the accent */
  --prajna-accent-tint: rgba(67, 56, 202, 0.08); /* selected-state wash */
  --prajna-link: #4338ca;            /* ~8.9:1 on white */
  --prajna-focus-ring: #4338ca;

  /* ---- shape & depth — consistent soft radius, sparing shadow ---- */
  --prajna-radius-sm: 6px;
  --prajna-radius-md: 10px;
  --prajna-radius-lg: 14px;
  --prajna-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --prajna-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* ---- typography — platform-native, restrained scale ---- */
  --prajna-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --prajna-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --prajna-text-display: 1.75rem;   /* 28px — restrained; few uses per surface */
  --prajna-text-body: 0.9375rem;    /* 15px */
  --prajna-text-body-sm: 0.8125rem; /* 13px */

  /* ---- AI presence — one working cue, tied to REAL state by the consumer ---- */
  --prajna-motion-cue-duration: 1400ms;
  --prajna-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --prajna-working-cue-tint: rgba(67, 56, 202, 0.16);
}

/* Dark via OS setting (renderer's home mood) */
@media (prefers-color-scheme: dark) {
  :root {
    --prajna-bg: #111111;
    --prajna-surface: #1c1c1e;
    --prajna-surface-raised: #242426;
    --prajna-text: #f2f2f7;          /* near-white */
    --prajna-text-muted: #98989d;    /* ~6.8:1 on --prajna-bg */
    --prajna-border: #2c2c2e;

    --prajna-accent: #4338ca;        /* stays the signature; white text on it is AA */
    --prajna-accent-hover: #3730a3;
    --prajna-accent-contrast: #ffffff;
    --prajna-accent-tint: rgba(99, 102, 241, 0.16);
    /* same hue, lightened only enough to clear AA as text/ring on dark —
       an accessibility variant of the one accent, not a second colour */
    --prajna-link: #a5b4fc;
    --prajna-focus-ring: #6366f1;

    --prajna-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --prajna-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --prajna-working-cue-tint: rgba(99, 102, 241, 0.22);
  }
}

/* Explicit theme stamp wins over the OS setting (renderer toggle stays authoritative) */
:root[data-theme="light"] {
  --prajna-bg: #ffffff;
  --prajna-surface: #f6f6f7;
  --prajna-surface-raised: #ffffff;
  --prajna-text: #0a0a0a;
  --prajna-text-muted: #6e6e73;
  --prajna-border: #e4e4e7;
  --prajna-accent: #4338ca;
  --prajna-accent-hover: #3730a3;
  --prajna-accent-contrast: #ffffff;
  --prajna-accent-tint: rgba(67, 56, 202, 0.08);
  --prajna-link: #4338ca;
  --prajna-focus-ring: #4338ca;
  --prajna-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --prajna-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --prajna-working-cue-tint: rgba(67, 56, 202, 0.16);
}

:root[data-theme="dark"] {
  --prajna-bg: #111111;
  --prajna-surface: #1c1c1e;
  --prajna-surface-raised: #242426;
  --prajna-text: #f2f2f7;
  --prajna-text-muted: #98989d;
  --prajna-border: #2c2c2e;
  --prajna-accent: #4338ca;
  --prajna-accent-hover: #3730a3;
  --prajna-accent-contrast: #ffffff;
  --prajna-accent-tint: rgba(99, 102, 241, 0.16);
  --prajna-link: #a5b4fc;
  --prajna-focus-ring: #6366f1;
  --prajna-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --prajna-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --prajna-working-cue-tint: rgba(99, 102, 241, 0.22);
}

/*
 * The single working cue primitive (DESIGN.md "AI presence"). The visual pass
 * attaches `.prajna-working-cue` to the agent's REAL status element only, and
 * removes it when the turn ends — no idle loop, no fake activity. Provided here
 * so the motion contract lives with the tokens; honors reduced-motion.
 */
@keyframes prajna-working-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--prajna-working-cue-tint);
  }
  50% {
    box-shadow: 0 0 0 4px var(--prajna-working-cue-tint);
  }
}

.prajna-working-cue {
  animation: prajna-working-pulse var(--prajna-motion-cue-duration) var(--prajna-motion-ease)
    infinite;
}

@media (prefers-reduced-motion: reduce) {
  .prajna-working-cue {
    animation: none;
  }
}