/*
 * PATI Design Tokens — shared palette, extracted from AdLauncher
 * (02_projects/adlauncher/app/globals.css), source: Star Admin 2 Pro theme.
 *
 * Plain CSS custom properties. No Tailwind/build dependency — drop a
 * <link rel="stylesheet" href="pati-tokens.css"> into any static HTML
 * (image-launcher, page-launcher) or @import it before Tailwind's
 * @theme map in a Next.js app (see adlauncher/app/globals.css for that wiring).
 *
 * Dark mode: add class="dark" on <html> or <body>.
 *
 * Source of truth = AdLauncher. If you edit a color here, port the
 * same edit back to app/globals.css — this file is a copy, not a link.
 */

:root {
  /* Surfaces */
  --bg: #f4f5f7;
  --sidebar-surface: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --inset: #f2f4f7;
  --hover: #eef1f6;

  /* Lines */
  --line-soft: rgba(30, 40, 61, 0.08);
  --line-2: rgba(30, 40, 61, 0.05);
  --line-str: rgba(30, 40, 61, 0.15);
  --edge: rgba(30, 40, 61, 0.22);

  /* Text */
  --text-1: #1f1f1f;
  --text-2: #595e70;
  --text-3: #62677a;

  /* Brand + chart hues */
  --violet: #3a61f6;
  --violet-2: #5a7bf9;
  --blue: #1f3bb3;
  --cyan: #05c3fb;
  --gray-line: #94a3b8;
  --brand-accent: #1f3bb3;
  --accent-soft: rgba(31, 59, 179, 0.08);
  --accent-line: rgba(31, 59, 179, 0.28);

  /* Decorative */
  --grad: linear-gradient(135deg, #1f3bb3, #3a61f6);
  --grad-soft: linear-gradient(135deg, rgba(31, 59, 179, 0.1), rgba(5, 195, 251, 0.06));
  --sh: 0 1px 2px rgba(30, 40, 61, 0.06);
  --sh-md: 0 12px 32px -12px rgba(30, 40, 61, 0.18);
  --glow: 0 6px 18px -6px rgba(31, 59, 179, 0.35);

  /* Semantic roles (shadcn-style names) */
  --primary: var(--brand-accent);
  --primary-foreground: #ffffff;
  /* `--primary` is a fill color: only needs 3:1 since it always carries white
     text. As *text* on --card it's 9.0:1 in light, 2.98:1 in dark — so --link
     needs its own lighter value in dark mode. Plain info text uses
     --foreground / --muted-foreground, not this. */
  --link: var(--brand-accent);

  --background: var(--bg);
  --foreground: var(--text-1);
  --card: var(--surface);
  --card-foreground: var(--text-1);
  --popover: var(--surface);
  --popover-foreground: var(--text-1);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--text-1);
  --muted: var(--inset);
  --muted-foreground: var(--text-2);
  --accent: var(--accent-soft);
  --accent-foreground: var(--brand-accent);
  --destructive: #f95f53;
  --border: var(--line-soft);
  --input: var(--line-str);
  --ring: var(--brand-accent);
  --radius: 0.5rem;

  --chart-1: var(--violet);
  --chart-2: var(--blue);
  --chart-3: var(--gray-line);
  --chart-4: var(--cyan);
  --chart-5: var(--violet-2);

  --sidebar: var(--sidebar-surface);
  --sidebar-foreground: var(--text-1);
  --sidebar-primary: var(--brand-accent);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: var(--accent-soft);
  --sidebar-accent-foreground: var(--text-1);
  --sidebar-border: var(--line-soft);
  --sidebar-ring: var(--brand-accent);

  /* Status */
  --ok: #0d746e;
  --ok-soft: rgba(52, 177, 170, 0.12);
  --ok-line: rgba(13, 116, 110, 0.32);
  --warn: #8f6100;
  --warn-soft: rgba(226, 158, 9, 0.15);
  --warn-line: rgba(143, 97, 0, 0.34);
  --bad: #c8382d;
  --bad-soft: rgba(249, 95, 83, 0.1);
  --bad-line: rgba(200, 56, 45, 0.32);
  --t2-tint: #5c6273;
  --bad-tint: #a8291f;

  /* Fonts — if the target app doesn't self-host Manrope like AdLauncher does,
     link Google Fonts yourself; this just sets the fallback stack. */
  --font-heading: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dark {
  color-scheme: dark;
  --bg: #1f2127;
  --sidebar-surface: #191b20;
  --surface: #252730;
  --surface-2: #2a2c36;
  --inset: #1b1d23;
  --hover: #2c2e38;

  --line-soft: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.05);
  --line-str: rgba(255, 255, 255, 0.14);
  --edge: rgba(255, 255, 255, 0.2);

  --text-1: #d8d9e3;
  --text-2: #9c9fa6;
  --text-3: #9395a1;

  --violet: #5a7bf9;
  --violet-2: #7d97fb;
  --blue: #3a61f6;
  --cyan: #05c3fb;
  --gray-line: #cbd2e0;
  --brand-accent: #3a61f6;
  --accent-soft: rgba(58, 97, 246, 0.16);
  --accent-line: rgba(58, 97, 246, 0.4);

  --grad: linear-gradient(135deg, #3a61f6, #5a7bf9);
  --grad-soft: linear-gradient(135deg, rgba(58, 97, 246, 0.2), rgba(5, 195, 251, 0.12));
  --sh: 0 2px 8px rgba(0, 0, 0, 0.4);
  --sh-md: 0 16px 40px -14px rgba(0, 0, 0, 0.6);
  --glow: 0 8px 24px -8px rgba(58, 97, 246, 0.55);

  --primary: var(--brand-accent);
  --primary-foreground: #ffffff;
  /* #93b0ff = 6.99:1 on --card, vs 2.98:1 for --brand-accent. See :root note. */
  --link: #93b0ff;

  --background: var(--bg);
  --foreground: var(--text-1);
  --card: var(--surface);
  --card-foreground: var(--text-1);
  --popover: var(--surface);
  --popover-foreground: var(--text-1);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--text-1);
  --muted: var(--inset);
  --muted-foreground: var(--text-2);
  --accent: var(--accent-soft);
  --accent-foreground: var(--brand-accent);
  --destructive: #fb6f63;
  --border: var(--line-soft);
  --input: var(--line-str);
  --ring: var(--brand-accent);

  --sidebar: var(--sidebar-surface);
  --sidebar-foreground: var(--text-1);
  --sidebar-primary: var(--brand-accent);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: var(--accent-soft);
  --sidebar-accent-foreground: var(--text-1);
  --sidebar-border: var(--line-soft);
  --sidebar-ring: var(--brand-accent);

  --ok: #3fbfb7;
  --ok-soft: rgba(63, 191, 183, 0.14);
  --ok-line: rgba(63, 191, 183, 0.4);
  --warn: #f0aa2b;
  --warn-soft: rgba(240, 170, 43, 0.14);
  --warn-line: rgba(240, 170, 43, 0.42);
  --bad: #fd8478;
  --bad-soft: rgba(251, 111, 99, 0.13);
  --bad-line: rgba(251, 111, 99, 0.45);
  --t2-tint: #9c9fa6;
  --bad-tint: #fd8478;
}

/* Plain-HTML convenience — skip if the target app (like AdLauncher) maps
   these onto Tailwind utilities itself. */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}