/*
 * Agent Harness — design tokens
 * Sourced from FlapKap's brand system (flapkap-design skill / live site stylesheet).
 * Dark mode only — this is an internal ops/dev tool, dark is FlapKap's default medium.
 * Never hardcode a hex outside this file; everything else consumes these custom properties.
 */

:root {
  /* ---- brand ramps ---- */
  --bg: #050505;
  --white: #ffffff;
  --teal: #00bbb9;
  --teal-alt: #00c8c8;
  --mint: #b5e8d6;

  --p-50: #eff4ff;
  --p-100: #d1e0ff;
  --p-200: #b2ccff;
  --p-300: #84adff;
  --p-400: #528bff;
  --p-500: #2970ff;
  --p-600: #155eef;
  --p-700: #004eeb;
  --p-800: #0040c1;
  --p-900: #00359e;

  --n-25: #fafafa;
  --n-50: #f4f4f5;
  --n-100: #e4e4e7;
  --n-200: #d1d1d6;
  --n-300: #a0a0ab;
  --n-400: #70707b;
  --n-500: #51525c;
  --n-600: #3f3f46;
  --n-700: #26272b;
  --n-800: #18181b;

  /* ---- semantic aliases (dark, the only mode this app ships) ---- */
  --surface: var(--bg);
  --surface-raised: var(--n-800);
  --surface-sunken: #0a0a0b;
  --surface-overlay: #101012;
  --border: var(--n-600);
  --border-subtle: #232326;
  --text-primary: var(--white);
  --text-secondary: var(--n-300);
  --text-muted: var(--n-400);
  --accent: var(--p-500);
  --accent-hover: var(--p-600);
  --accent-active: var(--p-700);
  --accent-subtle: rgba(41, 112, 255, 0.12);
  --accent-subtle-strong: rgba(41, 112, 255, 0.22);
  --teal-subtle: rgba(0, 187, 185, 0.14);

  /* status (not on the brand palette — defined once, reused everywhere) */
  --success: #2fbf82;
  --success-subtle: rgba(47, 191, 130, 0.13);
  --danger: #f0584f;
  --danger-subtle: rgba(240, 88, 79, 0.13);
  --warning: #e0a63e;
  --warning-subtle: rgba(224, 166, 62, 0.13);

  /* ---- type ---- */
  --font-head: 'Poppins', 'Montserrat', -apple-system, sans-serif;
  --font-body: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;

  --fs-h1: 3.5rem;
  --fs-h2: 3rem;
  --fs-h3: 2.5rem;
  --fs-h4: 2rem;
  --fs-h5: 1.5rem;
  --fs-h6: 1.25rem;
  --fs-medium: 1.125rem;
  --fs-regular: 0.875rem;
  --fs-small: 0.75rem;
  --fs-tiny: 0.625rem;

  --fw-heading: 400;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* ---- shape ---- */
  --radius-pill: 99px;
  --radius-card: 1em;
  --radius-accordion: 8px;
  --radius-input: 0.5em;
  --radius-tile: 1rem;
  --radius-sm: 0.4rem;

  /* ---- space ---- */
  --sp-tiny: 0.25rem;
  --sp-xxs: 0.5rem;
  --sp-xs: 1rem;
  --sp-s: 1.5rem;
  --sp-m: 2rem;
  --sp-l: 3rem;
  --sp-xl: 4rem;
  --sp-xxl: 5rem;

  /* ---- layout ---- */
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 0px;
  --header-h: 60px;
  --column-max: 46rem;

  /* ---- shadow ---- */
  --shadow-sm: 0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 24px -6px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(41, 112, 255, 0.25), 0 8px 32px -8px rgba(41, 112, 255, 0.35);

  /* ---- materials: the glass layer ---------------------------------------------
   * FlapKap's own system is flat by design — #050505 canvas, #18181B cards, a
   * hairline #3F3F46 border. That is right for a marketing page and thin for an
   * operations console, where a dozen things are true at once and the eye needs
   * to know what floats above what.
   *
   * So: Apple's material idea (a translucent surface that samples what is behind
   * it) expressed ENTIRELY in FlapKap tokens. No new hues. #18181B at varying
   * opacity over #050505, blurred and slightly saturated, with a 1px top
   * highlight for the lit edge and a soft shadow for the drop. Depth comes from
   * light and blur, never from a colour the brand does not own.
   *
   * Cost is real: backdrop-filter forces a compositing layer. These belong on
   * CHROME — header, sidebar, panels, composer, overlays — not on every row in a
   * list. `--mat-flat` exists for the many places that want the look without the
   * blur.
   */
  --mat-thin: rgba(24, 24, 27, 0.55);
  --mat-regular: rgba(24, 24, 27, 0.72);
  --mat-thick: rgba(24, 24, 27, 0.88);
  --mat-flat: #16161a;                       /* the same value, no translucency */
  --mat-chrome: rgba(5, 5, 5, 0.72);         /* over content: header, sidebar */

  --blur-thin: saturate(160%) blur(14px);
  --blur-regular: saturate(180%) blur(24px);
  --blur-thick: saturate(180%) blur(40px);

  /* the lit top edge and the hairline below it — this pair is what reads as glass */
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --edge-hi-strong: inset 0 1px 0 rgba(255, 255, 255, 0.11);
  --edge-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --border-glass: rgba(255, 255, 255, 0.09);
  --border-glass-strong: rgba(255, 255, 255, 0.14);

  /* elevation: one ramp, used by level not by taste */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), var(--edge-hi);
  --elev-2: 0 4px 16px -4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3), var(--edge-hi);
  --elev-3: 0 16px 40px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3), var(--edge-hi-strong);
  --elev-4: 0 32px 80px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.35), var(--edge-hi-strong);

  /* accent glass — the agent's own surfaces, where blue leads */
  --mat-accent: rgba(41, 112, 255, 0.10);
  --mat-accent-strong: rgba(41, 112, 255, 0.16);
  --border-accent-glass: rgba(41, 112, 255, 0.30);
  --elev-accent: 0 8px 32px -8px rgba(41, 112, 255, 0.28), var(--edge-hi);

  /* atmosphere: the brand's blur(200px) blue->teal wash. ONE per view, per the
   * design system's own rule. Placed behind chrome, never behind reading text. */
  --wash-blue: radial-gradient(60% 60% at 20% 0%, rgba(41, 112, 255, 0.16), transparent 70%);
  --wash-teal: radial-gradient(50% 50% at 90% 10%, rgba(0, 187, 185, 0.10), transparent 70%);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}