/* Pixel Workshop design tokens — shared by home.css and site.css */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --paper: #f4f0e8;
  --paper-deep: #e9e2d5;
  --sand: #ebe5da;
  --card: #fffdf8;
  --card-strong: #f7f1e5;
  --field: #ffffff;

  /* Text */
  --ink: #17211e;
  --ink-soft: #4f5b56;
  --ink-faint: #58635d;

  /* Lines */
  --line: #d6d0c5;
  --line-strong: #c5bdaf;

  /* Accents */
  --orange: #f05a36;          /* decorative only: dots, glows, rules */
  --orange-large: #d9481f;    /* display-size text (3:1) */
  --orange-text: #b23a1c;     /* body-size text (4.5:1) */
  --accent-bg: #c93f20;       /* filled buttons, white label */
  --accent-bg-hover: #a8361a;
  --on-accent: #ffffff;
  --green: #244f42;
  --green-soft: #d7e5dc;
  --yellow: #f3c96a;
  --caution-text: #7b5706;

  /* Per-app accents (index.html sets --app-color / --app-tint per card) */
  --app-label-mix: 78%;       /* app colour share in category labels */
  --app-label-toward: #000;
  --app-tint-share: 100%;     /* featured cards: 100% = pastel tint */

  /* Always-dark panels (hero stage, principles, studio note, footer) */
  --night: #17211e;
  --white: #fffdf8;

  /* Channel values for translucent layers: rgb(var(--x-rgb) / alpha) */
  --surface-rgb: 255 253 248;
  --ink-rgb: 23 33 30;
  --shadow-rgb: 23 33 30;
  --glow-yellow: rgba(243, 201, 106, 0.3);
  --glow-green: rgba(205, 228, 214, 0.55);

  /* Type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-label: 0.75rem;      /* smallest size used anywhere */

  /* Layout */
  --shell: 1200px;
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 32px;

  /* Depth and motion */
  --shadow-sm: 0 1px 1px rgb(var(--shadow-rgb) / 0.04), 0 12px 32px rgb(var(--shadow-rgb) / 0.06);
  --shadow-md: 0 2px 2px rgb(var(--shadow-rgb) / 0.04), 0 24px 64px rgb(var(--shadow-rgb) / 0.12);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark palette. Defined twice: once for the system setting, once for an explicit data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121816;
    --paper-deep: #0e1311;
    --sand: #0e1311;
    --card: #1b2320;
    --card-strong: #232c29;
    --field: #151c1a;
    --ink: #f1ece2;
    --ink-soft: #b3bbb6;
    --ink-faint: #9aa39e;
    --line: #2f3935;
    --line-strong: #3d4843;
    --orange-large: #ff7a56;
    --orange-text: #ff8a6a;
    --green: #86c7a9;
    --green-soft: #1f3a30;
    --caution-text: #f3c96a;
    --app-label-mix: 50%;
    --app-label-toward: #fff;
    --app-tint-share: 0%;
    --night: #1a2421;
    --surface-rgb: 27 35 32;
    --ink-rgb: 241 236 226;
    --shadow-rgb: 0 0 0;
    --glow-yellow: rgba(243, 201, 106, 0.07);
    --glow-green: rgba(134, 199, 169, 0.08);
  }
}

:root[data-theme="dark"] {
  --paper: #121816;
  --paper-deep: #0e1311;
  --sand: #0e1311;
  --card: #1b2320;
  --card-strong: #232c29;
  --field: #151c1a;
  --ink: #f1ece2;
  --ink-soft: #b3bbb6;
  --ink-faint: #9aa39e;
  --line: #2f3935;
  --line-strong: #3d4843;
  --orange-large: #ff7a56;
  --orange-text: #ff8a6a;
  --green: #86c7a9;
  --green-soft: #1f3a30;
  --caution-text: #f3c96a;
  --app-label-mix: 50%;
  --app-label-toward: #fff;
  --app-tint-share: 0%;
  --night: #1a2421;
  --surface-rgb: 27 35 32;
  --ink-rgb: 241 236 226;
  --shadow-rgb: 0 0 0;
  --glow-yellow: rgba(243, 201, 106, 0.07);
  --glow-green: rgba(134, 199, 169, 0.08);
}