:root {
  /* Typography */
  --font-main: "Luciole", system-ui, sans-serif;
  --line-height-base: 1.6;

  /* Backgrounds */
  --bg-main: #cce0d6;
  --bg-soft: #f1f1f1;
  --bg-hover: #b5d2c4;

  /* Text */
  --text-main: #53635d;
  --text-strong: #313d39;

  /* Accent */
  --accent: #5d8f80;
  --accent-hover: #3e6a5d;

  /* Borders */
  --border-soft: #9bbfb2;
  --border-strong: #000;

  /* Cards */
  --card-1: #e8f2ee;
  --card-2: #f1efe8;
  --card-3: #e9eff3;
  --card-4: #f0e9ef;

 /* Code block */
  --code-bg: #cce0d6;
  --code-border: #e0d9c7;
  --code-text: #333;

  /* Syntax highlighting */
  --syntax-comment: #6a7f78;
  --syntax-keyword: #2f6f8f;
  --syntax-string:  #8a3e1f;
  --syntax-number:  #7a5a00;
  --syntax-function:#3b6b4b;
  --syntax-type:    #5a4fa3;
  --syntax-operator:#444;

  --text-code: #333;

  --btn-primary-hover-bg: #000;     /* black */
  --btn-primary-hover-text: #fff;   /* white */

  /* Slug badge (light mode) */
  --slug-text: var(--text-strong);
  --slug-bg: #ffffff;
  --slug-border: var(--border-soft);

  /* Status colors */
  --status-public-text: #166534;
  --status-public-bg: rgba(22, 101, 52, 0.12);
  --status-public-border: rgba(22, 101, 52, 0.35);
  
  --status-private-text: #c2410c;
  --status-private-bg: rgba(251, 146, 60, 0.12);
  --status-private-border: rgba(251, 146, 60, 0.4);

  color-scheme: light;
}

/* ================================
   Dark Theme
   ================================ */

/* ================================
   Dark theme (manual)
   ================================ */

:root[data-theme="dark"] {
  --bg-main: #0f1513;
  --bg-soft: #151c19;
  --bg-hover: #1f2a26;

  --text-main: #cfd8d5;
  --text-strong: #e7f0ec;

  --accent: #7fb3a2;
  --accent-hover: #9fcbbd;

  --border-soft: #2a3a35;
  --border-strong: #3d524b;

  --card-1: #16201d;
  --card-2: #1b201a;
  --card-3: #182022;
  --card-4: #201a20;

  --code-bg: #0d1311;
  --code-border: #24332e;
  --code-text: #d6e0dc;

  --syntax-comment: #7f9b92;
  --syntax-keyword: #8fbfdc;
  --syntax-string:  #d4a37c;
  --syntax-number:  #c2b27f;
  --syntax-function:#9ecfa3;
  --syntax-type:    #b4a7e6;
  --syntax-operator:#cfd8d5;

  --btn-primary-hover-bg: #fff;     /* white */
  --btn-primary-hover-text: #000;   /* black */

  /* Slug badge (dark mode tuned) */
  --slug-text: #fb923c;
  --slug-bg: rgba(251, 146, 60, 0.12);
  --slug-border: rgba(251, 146, 60, 0.4);

  /* Status colors (dark tuned) */
  --status-public-text: #4ade80;
  --status-public-bg: rgba(74, 222, 128, 0.12);
  --status-public-border: rgba(74, 222, 128, 0.4);
  
  --status-private-text: #fb923c;
  --status-private-bg: rgba(251, 146, 60, 0.15);
  --status-private-border: rgba(251, 146, 60, 0.45);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-main: #0f1513;
    --bg-soft: #151c19;
    --bg-hover: #1f2a26;

    --text-main: #cfd8d5;
    --text-strong: #e7f0ec;

    --accent: #7fb3a2;
    --accent-hover: #9fcbbd;

    --border-soft: #2a3a35;
    --border-strong: #3d524b;

    --card-1: #16201d;
    --card-2: #1b201a;
    --card-3: #182022;
    --card-4: #201a20;

    --code-bg: #0d1311;
    --code-border: #24332e;
    --code-text: #d6e0dc;

    --syntax-comment: #7f9b92;
    --syntax-keyword: #8fbfdc;
    --syntax-string:  #d4a37c;
    --syntax-number:  #c2b27f;
    --syntax-function:#9ecfa3;
    --syntax-type:    #b4a7e6;
    --syntax-operator:#cfd8d5;

    --btn-primary-hover-bg: #fff;     /* white */
    --btn-primary-hover-text: #000;   /* black */

    /* Slug badge (dark mode tuned) */
    --slug-text: #fb923c;
    --slug-bg: rgba(251, 146, 60, 0.12);
    --slug-border: rgba(251, 146, 60, 0.4);

    /* Status colors (dark tuned) */
    --status-public-text: #4ade80;
    --status-public-bg: rgba(74, 222, 128, 0.12);
    --status-public-border: rgba(74, 222, 128, 0.4);
    
    --status-private-text: #fb923c;
    --status-private-bg: rgba(251, 146, 60, 0.15);
    --status-private-border: rgba(251, 146, 60, 0.45);

    color-scheme: dark;
  }
}