/* ============================================================
   THEME OVERRIDE SKELETON — PageKeeper & Dataset Explorer
   ============================================================
   Both apps are built with the same shadcn/Tailwind v4 token
   system: every color resolves through hsl(var(--token)), where
   each token is an "H S% L%" triplet (no hsl() wrapper, no commas)
   defined once on :root. That means retinting the whole app is
   just redefining these variables — no component code involved.

   This file's values are converted from the portfolio's
   professional-light palette (style.css). It's a STARTING POINT —
   nudge individual values below to taste.

   Two ways to use it:
   1. Quick preview on the already-built bundle: add
      <link rel="stylesheet" href="/theme-override-skeleton.css" />
      right before </head> in projects/pagekeeper/index.html and
      projects/dataset-explorer/index.html. Loads after the
      compiled CSS, so these values win. No rebuild needed.
   2. The real fix: copy these values into the app's own source
      (wherever its :root theme tokens are defined — likely a
      globals.css or theme.css next to a Tailwind v4 @theme block)
      and rebuild with Vite. That keeps the theme in version
      control with the rest of the app instead of bolted on after.
   ============================================================ */

:root {
  /* ---- core surfaces ---- */
  --background: 210 21% 95%;       /* --color-bg        #eef1f4 */
  --foreground: 219 41% 19%;       /* --color-text       #1d2b45 */
  --border: 218 19% 83%;           /* --color-border     #ccd2dc */
  --input: 218 19% 83%;            /* --color-border     #ccd2dc */

  --card: 30 100% 99%;             /* --color-surface    #fffcf9 */
  --card-foreground: 219 41% 19%;  /* --color-text       #1d2b45 */
  --card-border: 218 19% 83%;      /* --color-border     #ccd2dc */

  --popover: 30 100% 99%;          /* --color-surface    #fffcf9 */
  --popover-foreground: 219 41% 19%;
  --popover-border: 218 19% 83%;

  --muted: 215 29% 92%;            /* --color-surface-2  #e4e9f0 */
  --muted-foreground: 221 21% 36%; /* --color-text-muted #48546e */

  /* ---- brand colors ---- */
  --primary: 198 60% 50%;              /* --color-primary       #339cca */
  --primary-foreground: 210 21% 95%;   /* --color-bg (light text on primary) */
  --ring: 198 60% 50%;                 /* --color-primary       #339cca */

  --secondary: 342 42% 34%;            /* --color-secondary     #7b3248 */
  --secondary-foreground: 349 44% 93%; /* --color-secondary-soft #f5e5e8 */

  --accent: 196 63% 92%;               /* --color-primary-highlight #dcf0f7 */
  --accent-foreground: 199 69% 35%;    /* --color-primary-ink   #1c7098 */

  --destructive: 358 70% 39%;          /* --color-error         #a71e22 */
  --destructive-foreground: 210 21% 95%;

  /* ---- sidebar (PageKeeper's status-tab rail) ---- */
  --sidebar: 215 29% 92%;
  --sidebar-foreground: 219 41% 19%;
  --sidebar-border: 218 19% 83%;
  --sidebar-primary: 198 60% 50%;
  --sidebar-primary-foreground: 210 21% 95%;
  --sidebar-accent: 196 63% 92%;
  --sidebar-accent-foreground: 199 69% 35%;
  --sidebar-ring: 198 60% 50%;

  /* ---- chart palette (Dataset Explorer's stat charts) ----
     Kept distinct from each other for legibility; loosely drawn
     from the portfolio's primary/secondary/olive family. */
  --chart-1: 198 60% 50%;   /* primary        #339cca */
  --chart-2: 342 42% 34%;   /* secondary      #7b3248 */
  --chart-3: 195 22% 32%;   /* olive          #3f5a63 */
  --chart-4: 199 69% 35%;   /* primary-ink    #1c7098 */
  --chart-5: 349 30% 70%;   /* secondary-soft-ish */

  /* ---- type ---- */
  --font-sans: 'Inter', -apple-system, sans-serif;      /* --font-body */
  --font-serif: 'Eilaria Regular', Georgia, serif;      /* --font-display */
  /* --font-mono left as-is (JetBrains Mono) — no portfolio equivalent */

  /* ---- shape ---- */
  --radius: 0.85rem; /* matches the portfolio's --radius-md */
}

/* Both apps ship a .dark variant too (toggled by a sun/moon button
   in their own header). Leaving that block alone for now since the
   portfolio's professional side is locked to light-only — fill this
   in later if you want the apps' dark mode to match something too. */