/* Pandi artifact tokens — derived 1:1 from extensions/pi-pandi-theme/themes/
 * panda-syntax-dark.json and panda-syntax-light.json (the source of truth).
 * Dark is the base (matches the TUI default); light activates via
 * prefers-color-scheme. Copy this block into self-contained HTML artifacts.
 */

:root {
  /* Surfaces — theme `export` section + vars */
  --bg: #242526;        /* export.pageBg (dark) */
  --paper: #292A2B;     /* export.cardBg (dark) = vars.bg */
  --info-bg: #2E2A33;   /* export.infoBg (dark) */
  --raised: #31353A;    /* vars.seal — selected/hover surfaces */

  /* Ink */
  --ink: #E6E6E6;       /* vars.fg */
  --ink2: #BBBBBB;      /* vars.contrast — secondary text */
  --muted: #757575;     /* vars.lightGray — tertiary text */
  --line: #3E4250;      /* vars.steel — subtle borders */
  --line-strong: #676B79; /* vars.midnight — emphasized borders, hr */

  /* Accents — same semantic roles as the TUI theme */
  --accent: #FF75B5;      /* vars.pink — headings, kicker, primary accent */
  --accent-soft: #FF9AC1; /* vars.lightPink */
  --link: #6FC1FF;        /* vars.lightBlue — mdLink */
  --info: #45A9F9;        /* vars.blue — titles, highlighted borders */
  --success: #19F9D8;     /* vars.green */
  --warning: #FFCC95;     /* vars.lightOrange */
  --error: #FF4B82;       /* vars.lightRed */
  --code: #19F9D8;        /* mdCode — inline code */
  --purple: #BCAAFE;      /* vars.lightPurple — types, extras */

  /* Tinted callout surfaces — theme tool backgrounds */
  --success-bg: #1E2E2B;  /* toolSuccessBg (dark) */
  --error-bg: #2E1E24;    /* toolErrorBg (dark) */
  --warning-bg: #2E2A33;  /* export.infoBg reused as warm tinted surface */
}

@media (prefers-color-scheme: light) {
  :root {
    /* Surfaces */
    --bg: #ECECEC;        /* export.pageBg (light) */
    --paper: #F2F1F1;     /* export.cardBg (light) */
    --info-bg: #EDE4F8;   /* export.infoBg (light) */
    --raised: #E6DBCB;    /* vars.sel */

    /* Ink */
    --ink: #222223;       /* vars.fg */
    --ink2: #676B79;      /* vars.comment */
    --muted: #8D8D8D;     /* vars.dim */
    --line: #C9C9C9;      /* vars.borderLt */
    --line-strong: #676B79; /* vars.comment */

    /* Accents */
    --accent: #FF0077;      /* vars.pink (light) */
    --accent-soft: #FF629E; /* vars.pinkSoft */
    --link: #0091FF;        /* vars.blue (light) */
    --info: #0091FF;
    --success: #12B69D;     /* vars.teal */
    --warning: #FF8400;     /* vars.orange */
    --error: #FF4B82;       /* vars.red */
    --code: #12B69D;        /* mdCode (light) */
    --purple: #B084EB;      /* vars.purple */

    /* Tinted callout surfaces */
    --success-bg: #DCEEEA;  /* toolSuccessBg (light) */
    --error-bg: #F7DCE4;    /* toolErrorBg (light) */
    --warning-bg: #EDE4F8;  /* export.infoBg (light) */
  }
}