/* ==========================================================================
   Tool Brief — Color tokens
   Base palette from brand brief, extended with derived tints/shades using
   CSS relative-color syntax (oklch) so every state (hover/press/disabled)
   stays perceptually consistent with the source hex values. Never invented
   hues — only lightness/chroma steps off the five brand colors.
   ========================================================================== */

:root {
  /* ---- Base palette (verbatim from brief) ---- */
  --color-charcoal-900: #171717;   /* Workshop Charcoal */
  --color-graphite-800: #2B2D2F;   /* Site Graphite */
  --color-paper-100: #F5F1E8;      /* Paper White */
  --color-steel-400: #A8ADB2;      /* Steel Grey */

  --color-yellow-500: #FFC400;     /* Marking Yellow */
  --color-red-500: #E43D30;        /* Laser Red */
  --color-green-500: #37A66B;      /* Battery Green */

  --color-white: #FFFFFF;

  /* ---- Derived steps (oklch relative-color syntax off the base tokens) ---- */
  --color-charcoal-700: oklch(from var(--color-charcoal-900) calc(l + 0.18) c h);
  --color-charcoal-500: oklch(from var(--color-charcoal-900) calc(l + 0.32) c h);

  --color-steel-600: oklch(from var(--color-steel-400) calc(l - 0.18) calc(c * 0.9) h); /* AA body text on paper */
  --color-steel-200: oklch(from var(--color-steel-400) calc(l + 0.14) calc(c * 0.7) h); /* hairlines */
  --color-steel-100: oklch(from var(--color-steel-400) calc(l + 0.20) calc(c * 0.5) h); /* faint fills */

  --color-yellow-600: oklch(from var(--color-yellow-500) calc(l - 0.10) c h); /* hover */
  --color-yellow-700: oklch(from var(--color-yellow-500) calc(l - 0.18) c h); /* press */
  --color-yellow-100: oklch(from var(--color-yellow-500) calc(l + 0.12) calc(c * 0.35) h); /* tint fill */

  --color-red-600: oklch(from var(--color-red-500) calc(l - 0.08) c h);
  --color-red-100: oklch(from var(--color-red-500) calc(l + 0.34) calc(c * 0.25) h);

  --color-green-600: oklch(from var(--color-green-500) calc(l - 0.08) c h);
  --color-green-100: oklch(from var(--color-green-500) calc(l + 0.36) calc(c * 0.3) h);

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--color-paper-100);
  --surface-card: var(--color-white);
  --surface-sunken: var(--color-steel-100);
  --surface-inverse: var(--color-charcoal-900);
  --surface-header: var(--color-charcoal-900);
  --surface-header-alt: var(--color-graphite-800);
  --surface-overlay: color-mix(in oklch, var(--color-charcoal-900) 60%, transparent);

  /* ---- Semantic text ---- */
  --text-primary: var(--color-charcoal-900);
  --text-secondary: var(--color-charcoal-700);
  --text-muted: var(--color-steel-600);
  --text-inverse: var(--color-paper-100);
  --text-inverse-muted: var(--color-steel-400);
  --text-link: var(--color-charcoal-900);

  /* ---- Semantic borders ---- */
  --border-default: var(--color-steel-200);
  --border-strong: var(--color-charcoal-900);
  --border-inverse: color-mix(in oklch, var(--color-paper-100) 24%, transparent);

  /* ---- Accents / actions ---- */
  --accent-primary: var(--color-yellow-500);
  --accent-primary-hover: var(--color-yellow-600);
  --accent-primary-press: var(--color-yellow-700);
  --accent-primary-tint: var(--color-yellow-100);
  --accent-on-primary: var(--color-charcoal-900); /* text/icon color drawn on yellow */

  --state-success: var(--color-green-500);
  --state-success-hover: var(--color-green-600);
  --state-success-tint: var(--color-green-100);

  --state-danger: var(--color-red-500);
  --state-danger-hover: var(--color-red-600);
  --state-danger-tint: var(--color-red-100);

  --state-warning: var(--color-yellow-500);
  --state-warning-tint: var(--color-yellow-100);

  --focus-ring: var(--color-yellow-500);
}