/* ==========================================================================
   Kieffer Machine LLC — THEME TOKENS
   Change the look of the whole site from this one file.
   Status: PROVISIONAL. Graphite / steel / light neutrals come from the brand
   conversation. The cyan accent is borrowed from the mascot's light strips and
   is NOT an approved brand color yet — swap --accent* to change it everywhere.
   ========================================================================== */

:root {
  /* Graphite + steel (brand base) */
  --graphite-950: #0d1013;
  --graphite-900: #14181c;
  --graphite-800: #1d2329;
  --graphite-700: #2a323a;
  --steel-600: #55606a;
  --steel-500: #727e89;
  --steel-400: #949fa9;
  --steel-300: #b9c1c8;
  --steel-200: #d5dade;
  --steel-100: #e8ebee;
  --paper: #f3f4f5;
  --white: #ffffff;

  /* Accent (provisional) */
  --accent: #22c1dc;          /* on dark surfaces */
  --accent-ink: #0a6e82;      /* on light surfaces, AA contrast for text */
  --accent-glow: rgba(34, 193, 220, 0.35);

  /* Editor-only color: used ONLY for preview notes and empty photo slots,
     never for public design, so placeholders can't be mistaken for the brand. */
  --editor: #f0a23b;
  --editor-ink: #7a4a06;
  --editor-bg: #fff6e6;

  /* Type */
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-stretch: 125%;    /* Archivo width axis: wide, like the wordmark */

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 112px);
  --radius: 6px;
  --radius-lg: 10px;

  /* Motion (kept restrained; the mascot is the playful moment) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* Brushed-metal surface used on plates, cards and the title block */
  --brushed: linear-gradient(
      100deg,
      #dfe3e6 0%, #f4f6f7 18%, #cfd5d9 36%, #eef1f3 55%, #c9cfd4 74%, #e9ecee 100%
    );
  --brushed-dark: linear-gradient(
      100deg,
      #1b2126 0%, #2a323a 22%, #171c21 45%, #262e35 68%, #14181c 100%
    );
}