/* Design tokens (ADR-037). theme.css is the single, framework-agnostic token source —
   author it in plain CSS, Tailwind, or anything you like. A custom property with an
   @property declaration is an editor-exposable Design Token: its `syntax` gives the type,
   `initial-value` (or a :root declaration for universal "*" tokens like fonts) gives the
   value, and Group/Name derive from the --<group>-<name> name. Plain --x custom properties
   (no @property) stay internal. The page builder and MCP enumerate the @property-declared
   set; templates read tokens with var(--token). */

@property --color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #6366f1;
}

@property --color-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #0f172a;
}

@property --color-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --spacing-container {
  syntax: "<length>";
  inherits: false;
  initial-value: 1080px;
}

@property --spacing-section {
  syntax: "<length>";
  inherits: false;
  initial-value: 6rem;
}

@property --radius-card {
  syntax: "<length>";
  inherits: false;
  initial-value: 0.5rem;
}

/* Fonts can't be typed by @property ("*" syntax forbids initial-value), so the value lives
   in :root and the token leans on the --font-* naming convention for its kind. */
@property --font-sans {
  syntax: "*";
  inherits: true;
}

:root {
  /* Exposed-token values, mirrored here so a browser without @property support still
     resolves them (ADR-037 Consequences — resilience). */
  --color-primary: #6366f1;
  --color-ink: #0f172a;
  --color-surface: #ffffff;
  --spacing-container: 1080px;
  --spacing-section: 6rem;
  --radius-card: 0.5rem;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Internal token — used by the theme's CSS below, never offered to editors. */
  --color-muted: #94a3b8;
}