/* ==========================================================================
   PIXELS & CHISELS — DESIGN TOKENS  (single source of truth)
   Served at https://pixelsandchisels.com/brand/tokens.css
   Every property (main site + tool subdomains) links this file, then maps
   its own CSS to these variables. All tokens are prefixed --pc- so they can
   never collide with an app's own variables.

   Palette is derived from the logo: warm cream ground, charcoal ink, steel
   grey, a walnut chisel handle and the multicoloured "pixel" blocks.
   Contrast verified (WCAG AA): text pairs noted inline.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-v1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-v1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Raw palette ---- */
  --pc-ink: #211e1e;          /* logo charcoal, deepened */
  --pc-ink-2: #2d2928;        /* raised surface on ink */
  --pc-ink-3: #3a3534;        /* borders on ink */
  --pc-cream: #f6efe3;        /* page ground (light) */
  --pc-cream-2: #fbf7ef;      /* raised surface (light) */
  --pc-sand: #e6d7c5;         /* EXACT logo background */
  --pc-steel: #9e9e8d;        /* logo steel */
  --pc-walnut: #6b4a2f;       /* chisel handle */
  --pc-red: #c8323f;          /* brand action red — white text 5.3:1 */
  --pc-red-dark: #a82734;     /* hover / pressed — white text 7.0:1 */
  --pc-red-bright: #f0616d;   /* red on ink backgrounds — 5.2:1 */

  /* ---- Pixel accents (from the logo blocks). Decoration + category coding.
         Never rely on colour alone; pair with a label/icon. ---- */
  --pc-px-yellow: #f4e46e;
  --pc-px-mint: #c1e0ca;
  --pc-px-blue: #4fa9d9;
  --pc-px-pink: #d98bb0;
  --pc-px-orange: #f29a3d;
  --pc-px-green: #5fa35a;

  /* ---- Category coding ---- */
  --pc-cat-3d: var(--pc-px-blue);        /* 3D printing */
  --pc-cat-laser: var(--pc-px-orange);   /* fiber laser */
  --pc-cat-wood: var(--pc-walnut);       /* woodwork */

  /* ---- Semantic (light theme = default) ---- */
  --pc-bg: var(--pc-cream);
  --pc-surface: var(--pc-cream-2);
  --pc-surface-2: #ffffff;
  --pc-text: var(--pc-ink);                 /* 14.5:1 on bg */
  --pc-text-muted: #5c534b;                 /* 6.6:1 on bg */
  --pc-border: #d9cbb6;
  --pc-accent: var(--pc-red);
  --pc-accent-hover: var(--pc-red-dark);
  --pc-on-accent: #ffffff;
  --pc-link: #b02a37;                       /* 5.7:1 on bg */
  --pc-focus: #1f6feb;
  --pc-header-bg: var(--pc-ink);
  --pc-header-text: var(--pc-cream);
  --pc-footer-bg: var(--pc-ink);
  --pc-footer-text: #d9d0c3;

  /* ---- Typography ---- */
  --pc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --pc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid scale */
  --pc-step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.9rem);
  --pc-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --pc-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --pc-step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --pc-step-3: clamp(1.8rem, 1.4rem + 2vw, 2.9rem);
  --pc-step-4: clamp(2.3rem, 1.6rem + 3.5vw, 4.2rem);

  /* ---- Spacing (4px base) ---- */
  --pc-space-1: 0.25rem;
  --pc-space-2: 0.5rem;
  --pc-space-3: 0.75rem;
  --pc-space-4: 1rem;
  --pc-space-5: 1.5rem;
  --pc-space-6: 2rem;
  --pc-space-7: 3rem;
  --pc-space-8: 4.5rem;
  --pc-space-9: 6rem;

  /* ---- Shape, depth, motion ---- */
  --pc-radius-sm: 6px;
  --pc-radius: 10px;
  --pc-radius-lg: 16px;
  --pc-shadow-1: 0 1px 2px rgb(33 30 30 / 0.08), 0 2px 8px rgb(33 30 30 / 0.06);
  --pc-shadow-2: 0 4px 12px rgb(33 30 30 / 0.10), 0 12px 32px rgb(33 30 30 / 0.10);
  --pc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pc-dur: 180ms;
  --pc-container: 72rem;
}

/* ---- Dark theme: explicit toggle, or OS preference when not forced light ---- */
:root[data-theme="dark"] {
  --pc-bg: var(--pc-ink);
  --pc-surface: var(--pc-ink-2);
  --pc-surface-2: #363130;
  --pc-text: var(--pc-cream);               /* 14.5:1 */
  --pc-text-muted: #b5aa9c;                 /* 7.2:1 */
  --pc-border: var(--pc-ink-3);
  --pc-link: #f0616d;                       /* 5.2:1 */
  --pc-focus: #6ea8ff;
  --pc-header-bg: #171414;
  --pc-footer-bg: #171414;
  --pc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --pc-shadow-2: 0 8px 28px rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pc-bg: var(--pc-ink);
    --pc-surface: var(--pc-ink-2);
    --pc-surface-2: #363130;
    --pc-text: var(--pc-cream);
    --pc-text-muted: #b5aa9c;
    --pc-border: var(--pc-ink-3);
    --pc-link: #f0616d;
    --pc-focus: #6ea8ff;
    --pc-header-bg: #171414;
    --pc-footer-bg: #171414;
    --pc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --pc-shadow-2: 0 8px 28px rgb(0 0 0 / 0.5);
  }
}