/* ============================================================
   LCS — Color tokens
   Mapped from the app's SwiftUI system colors and the
   Palette struct in CircuitSceneRenderer.swift / CircuitCanvasView.swift.
   Light values on :root; dark values under .theme-dark and
   prefers-color-scheme: dark.
   ============================================================ */

:root {
  /* ---- iOS system greys / backgrounds (light) ---- */
  --sys-background: #ffffff;              /* systemBackground */
  --sys-background-secondary: #f2f2f7;    /* secondarySystemBackground */
  --sys-grouped-background: #f2f2f7;      /* systemGroupedBackground — the canvas */
  --sys-grouped-background-secondary: #ffffff; /* secondarySystemGroupedBackground — cards, gate fill */
  --sys-gray: #8e8e93;                    /* systemGray */
  --sys-gray-4: #d1d1d6;                  /* systemGray4 */
  --sys-gray-5: #e5e5ea;                  /* systemGray5 */

  /* ---- Label colors (light) ---- */
  --label: #000000;                       /* primary label */
  --label-secondary: rgba(60, 60, 67, 0.60);
  --label-tertiary: rgba(60, 60, 67, 0.30);

  /* ---- Accent + semantic system colors (light) ---- */
  --accent: #007aff;                      /* systemBlue — Select tool, active states */
  --sys-green: #34c759;
  --sys-orange: #ff9500;
  --sys-red: #ff3b30;
  --sys-purple: #af52de;
  --sys-pink: #ff2d55;
  --sys-teal: #30b0c7;
  --sys-indigo: #5856d6;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */

  /* Signal logic — the heart of the brand */
  --signal-high: var(--sys-green);        /* Palette.high  — a driven 1 */
  --signal-low: var(--sys-gray);          /* Palette.low   — a 0 / undriven */
  --signal-high-glow: rgba(52, 199, 89, 0.25); /* lit-output halo */

  /* Circuit rendering */
  --circuit-outline: rgba(0, 0, 0, 0.75); /* Palette.outline — gate stroke */
  --circuit-fill: var(--sys-grouped-background-secondary); /* Palette.componentFill */
  --circuit-port-fill: var(--sys-background);              /* Palette.portFill */
  --circuit-canvas: var(--sys-grouped-background);         /* the dotted grid surface */
  --circuit-grid-dot: rgba(0, 0, 0, 0.12);                 /* Color.primary @ .12 */
  --circuit-seg-dim: var(--sys-gray-5);                    /* unlit 7-seg segment */
  --circuit-lamp-off: var(--sys-gray-4);                   /* unlit output lamp */

  /* Surfaces & text */
  --surface-page: var(--sys-grouped-background);
  --surface-card: var(--sys-grouped-background-secondary);
  --surface-raised: var(--sys-background);
  --text-primary: var(--label);
  --text-secondary: var(--label-secondary);
  --text-tertiary: var(--label-tertiary);
  --separator: rgba(60, 60, 67, 0.29);    /* opaque separator ≈ system */

  /* Selection */
  --selection-stroke: var(--accent);
  --selection-fill: rgba(0, 122, 255, 0.08);
  --selection-row: rgba(0, 122, 255, 0.14);

  /* Karnaugh-map group tints (order from KarnaughMapView.swift) */
  --kmap-1: var(--accent);   /* blue */
  --kmap-2: var(--sys-orange);
  --kmap-3: var(--sys-green);
  --kmap-4: var(--sys-purple);
  --kmap-5: var(--sys-pink);
  --kmap-6: var(--sys-teal);
  --kmap-7: var(--sys-red);
  --kmap-8: var(--sys-indigo);
}

.theme-dark {
  --sys-background: #000000;
  --sys-background-secondary: #1c1c1e;
  --sys-grouped-background: #000000;
  --sys-grouped-background-secondary: #1c1c1e;
  --sys-gray: #8e8e93;
  --sys-gray-4: #3a3a3c;
  --sys-gray-5: #2c2c2e;

  --label: #ffffff;
  --label-secondary: rgba(235, 235, 245, 0.60);
  --label-tertiary: rgba(235, 235, 245, 0.30);

  --accent: #0a84ff;
  --sys-green: #30d158;
  --sys-orange: #ff9f0a;
  --sys-red: #ff453a;
  --sys-purple: #bf5af2;
  --sys-pink: #ff375f;
  --sys-teal: #40c8e0;
  --sys-indigo: #5e5ce6;

  --circuit-outline: rgba(255, 255, 255, 0.75);
  --circuit-grid-dot: rgba(255, 255, 255, 0.12);
  --separator: rgba(84, 84, 88, 0.60);
  --selection-fill: rgba(10, 132, 255, 0.10);
  --selection-row: rgba(10, 132, 255, 0.18);
}

/* Automatic OS dark mode: apply the registered .theme-dark scope, unless the
   consumer has explicitly opted into .theme-light. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    color-scheme: dark;
  }
}