/* ============================================================
   JAMT — Apple HIG color tokens (source of truth)
   Source: https://developer.apple.com/design/human-interface-guidelines/color
   Values frozen from the HIG reference table 2026-10-04 (iOS/iPadOS column).
   Apple warns these RGB values may shift between OS releases and must
   never be hard-coded per use site — always consume them through the
   --apple-* variables below, and prefer the semantic roles (--apple-label,
   --apple-system-background, ...) over raw hues.

   Wiring: linked BEFORE app.css (see views/partials/head.ejs). app.css
   maps its component variables (--blue, --ink, --card, ...) onto these
   tokens; new UI must use the tokens directly (see docs/design-system.md).
   Theme switching mirrors app.css: explicit [data-theme] wins, otherwise
   the OS prefers-color-scheme applies. Increased-contrast variants follow
   the HIG "accessible" column via prefers-contrast.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- Apple system hues, light appearance (HIG default column) ---- */
  --apple-red: #ff3b30;
  --apple-orange: #ff9500;
  --apple-yellow: #ffcc00;
  --apple-green: #34c759;
  --apple-mint: #00c7be;
  --apple-teal: #30b0c7;
  --apple-cyan: #32ade6;
  --apple-blue: #007aff;
  --apple-indigo: #5856d6;
  --apple-purple: #af52de;
  --apple-pink: #ff2d55;
  --apple-brown: #a2845e;
  --apple-gray: #8e8e93;
  --apple-gray-2: #aeaeb2;
  --apple-gray-3: #c7c7cc;
  --apple-gray-4: #d1d1d6;
  --apple-gray-5: #e5e5ea;
  --apple-gray-6: #f2f2f7;

  /* ---- Apple semantic UI roles, light appearance ---- */
  --apple-label: #000000;
  --apple-secondary-label: rgba(60, 60, 67, 0.6);
  --apple-tertiary-label: rgba(60, 60, 67, 0.3);
  --apple-quaternary-label: rgba(60, 60, 67, 0.18);
  --apple-placeholder-text: rgba(60, 60, 67, 0.3);
  --apple-system-fill: rgba(120, 120, 128, 0.2);
  --apple-secondary-system-fill: rgba(120, 120, 128, 0.16);
  --apple-tertiary-system-fill: rgba(118, 118, 128, 0.12);
  --apple-quaternary-system-fill: rgba(116, 116, 128, 0.08);
  --apple-system-background: #ffffff;
  --apple-secondary-system-background: #f2f2f7;
  --apple-tertiary-system-background: #ffffff;
  --apple-system-grouped-background: #f2f2f7;
  --apple-secondary-system-grouped-background: #ffffff;
  --apple-tertiary-system-grouped-background: #f2f2f7;
  --apple-separator: rgba(60, 60, 67, 0.29);
  --apple-opaque-separator: #c6c6c8;
  --apple-link: #007aff;

  /* ---- JAMT role aliases (what components actually use) ---- */
  --jamt-accent: var(--apple-blue);
  --jamt-danger: var(--apple-red);
  --jamt-success: var(--apple-green);
  --jamt-warning: var(--apple-orange);
}

/* ---- Dark appearance: explicit pin wins (mirrors app.css) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --apple-red: #ff453a;
  --apple-orange: #ff9f0a;
  --apple-yellow: #ffd60a;
  --apple-green: #30d158;
  --apple-mint: #63e6e2;
  --apple-teal: #40c8e0;
  --apple-cyan: #64d2ff;
  --apple-blue: #0a84ff;
  --apple-indigo: #5e5ce6;
  --apple-purple: #bf5af2;
  --apple-pink: #ff375f;
  --apple-brown: #ac8e68;
  --apple-gray: #8e8e93;
  --apple-gray-2: #636366;
  --apple-gray-3: #48484a;
  --apple-gray-4: #3a3a3c;
  --apple-gray-5: #2c2c2e;
  --apple-gray-6: #1c1c1e;

  --apple-label: #ffffff;
  --apple-secondary-label: rgba(235, 235, 245, 0.6);
  --apple-tertiary-label: rgba(235, 235, 245, 0.3);
  --apple-quaternary-label: rgba(235, 235, 245, 0.16);
  --apple-placeholder-text: rgba(235, 235, 245, 0.3);
  --apple-system-fill: rgba(120, 120, 128, 0.36);
  --apple-secondary-system-fill: rgba(120, 120, 128, 0.32);
  --apple-tertiary-system-fill: rgba(118, 118, 128, 0.24);
  --apple-quaternary-system-fill: rgba(118, 118, 128, 0.18);
  --apple-system-background: #000000;
  --apple-secondary-system-background: #1c1c1e;
  --apple-tertiary-system-background: #2c2c2e;
  --apple-system-grouped-background: #000000;
  --apple-secondary-system-grouped-background: #1c1c1e;
  --apple-tertiary-system-grouped-background: #2c2c2e;
  --apple-separator: rgba(84, 84, 88, 0.6);
  --apple-opaque-separator: #38383a;
  --apple-link: #0984ff;
}

/* ---- Dark appearance: follow the OS unless pinned to light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --apple-red: #ff453a;
    --apple-orange: #ff9f0a;
    --apple-yellow: #ffd60a;
    --apple-green: #30d158;
    --apple-mint: #63e6e2;
    --apple-teal: #40c8e0;
    --apple-cyan: #64d2ff;
    --apple-blue: #0a84ff;
    --apple-indigo: #5e5ce6;
    --apple-purple: #bf5af2;
    --apple-pink: #ff375f;
    --apple-brown: #ac8e68;
    --apple-gray: #8e8e93;
    --apple-gray-2: #636366;
    --apple-gray-3: #48484a;
    --apple-gray-4: #3a3a3c;
    --apple-gray-5: #2c2c2e;
    --apple-gray-6: #1c1c1e;

    --apple-label: #ffffff;
    --apple-secondary-label: rgba(235, 235, 245, 0.6);
    --apple-tertiary-label: rgba(235, 235, 245, 0.3);
    --apple-quaternary-label: rgba(235, 235, 245, 0.16);
    --apple-placeholder-text: rgba(235, 235, 245, 0.3);
    --apple-system-fill: rgba(120, 120, 128, 0.36);
    --apple-secondary-system-fill: rgba(120, 120, 128, 0.32);
    --apple-tertiary-system-fill: rgba(118, 118, 128, 0.24);
    --apple-quaternary-system-fill: rgba(118, 118, 128, 0.18);
    --apple-system-background: #000000;
    --apple-secondary-system-background: #1c1c1e;
    --apple-tertiary-system-background: #2c2c2e;
    --apple-system-grouped-background: #000000;
    --apple-secondary-system-grouped-background: #1c1c1e;
    --apple-tertiary-system-grouped-background: #2c2c2e;
    --apple-separator: rgba(84, 84, 88, 0.6);
    --apple-opaque-separator: #38383a;
    --apple-link: #0984ff;
  }
}

/* ---- Increased contrast: HIG "accessible" column, light ---- */
@media (prefers-contrast: more) {
  :root {
    --apple-red: #d70015;
    --apple-orange: #c93400;
    --apple-yellow: #b25000;
    --apple-green: #248a3d;
    --apple-mint: #0c817b;
    --apple-teal: #008299;
    --apple-cyan: #0071a4;
    --apple-blue: #0040dd;
    --apple-indigo: #3634a3;
    --apple-purple: #8944ab;
    --apple-pink: #d30f45;
    --apple-brown: #7f6545;
    --apple-gray: #6c6c70;
    --apple-gray-2: #8e8e93;
    --apple-gray-3: #aeaeb2;
    --apple-gray-4: #bcbcc0;
    --apple-gray-5: #d8d8dc;
    --apple-gray-6: #ebebf0;
    --apple-link: #0040dd;
  }
  /* ---- Increased contrast: HIG "accessible" column, dark ----
     Applies when dark is pinned, or when the OS is dark and nothing pins light. */
  [data-theme="dark"] {
    --apple-red: #ff6961;
    --apple-orange: #ffb340;
    --apple-yellow: #ffd426;
    --apple-green: #30db5b;
    --apple-mint: #63e6e2;
    --apple-teal: #5de6ff;
    --apple-cyan: #70d7ff;
    --apple-blue: #409cff;
    --apple-indigo: #7d7aff;
    --apple-purple: #da8fff;
    --apple-pink: #ff6482;
    --apple-brown: #b59469;
    --apple-gray: #aeaeb2;
    --apple-gray-2: #7c7c80;
    --apple-gray-3: #545456;
    --apple-gray-4: #444446;
    --apple-gray-5: #363638;
    --apple-gray-6: #242426;
    --apple-link: #409cff;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --apple-red: #ff6961;
      --apple-orange: #ffb340;
      --apple-yellow: #ffd426;
      --apple-green: #30db5b;
      --apple-mint: #63e6e2;
      --apple-teal: #5de6ff;
      --apple-cyan: #70d7ff;
      --apple-blue: #409cff;
      --apple-indigo: #7d7aff;
      --apple-purple: #da8fff;
      --apple-pink: #ff6482;
      --apple-brown: #b59469;
      --apple-gray: #aeaeb2;
      --apple-gray-2: #7c7c80;
      --apple-gray-3: #545456;
      --apple-gray-4: #444446;
      --apple-gray-5: #363638;
      --apple-gray-6: #242426;
      --apple-link: #409cff;
    }
  }
}