/* DocSchool — Apple-style layer, shared tokens.
   Loaded last in <head> on every restyled page. It only changes how things
   look: no page markup or script depends on anything here. */

:root {
  color-scheme: light dark;

  --ds-bg: #f2f2f7;            /* grouped background */
  --ds-cell: #ffffff;          /* grouped cell / card */
  --ds-cell-pressed: #e5e5ea;
  --ds-fill: #e9e9ee;          /* secondary buttons, icon wells */
  --ds-separator: rgba(60, 60, 67, 0.18);
  --ds-overlay: rgba(0, 0, 0, 0.32);

  --ds-label: #1d1d1f;         /* 16.8:1 on cell */
  --ds-secondary: #6e6e73;     /* 5.1:1 on cell */
  --ds-accent: #5e1ca8;        /* DocSchool purple, 9.5:1 on cell */
  --ds-accent-fill: #5e1ca8;   /* filled buttons, white text 9.5:1 */
  --ds-accent-tint: #efe7fa;   /* tinted buttons, accent text 7.9:1 */
  --ds-on-accent: #ffffff;
  --ds-red: #c0392b;           /* 5.4:1 */
  --ds-green: #1f7a46;         /* 5.3:1 */

  --ds-radius: 12px;
  --ds-radius-lg: 18px;
  --ds-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --ds-glass: rgba(242, 242, 247, 0.78);
  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Hebrew", "Segoe UI", "Heebo", system-ui, sans-serif;
  --ds-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Hebrew", "Segoe UI", "Heebo", system-ui, sans-serif;
}

/* Dark: follows the system, and DocSchool's own dark-mode setting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-bg: #000000;
    --ds-cell: #1c1c1e;
    --ds-cell-pressed: #2c2c2e;
    --ds-fill: #2c2c2e;
    --ds-separator: rgba(84, 84, 88, 0.6);
    --ds-overlay: rgba(0, 0, 0, 0.55);
    --ds-label: #f5f5f7;
    --ds-secondary: #a1a1a6;
    --ds-accent: #c39bff;        /* 7.7:1 on cell */
    --ds-accent-fill: #6d2fc4;   /* white text 7.4:1 */
    --ds-accent-tint: #2a1f3d;   /* accent text 6.9:1 */
    --ds-red: #ff6961;
    --ds-green: #4cd17f;
    --ds-shadow: none;
    --ds-glass: rgba(0, 0, 0, 0.72);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg: #000000;
  --ds-cell: #1c1c1e;
  --ds-cell-pressed: #2c2c2e;
  --ds-fill: #2c2c2e;
  --ds-separator: rgba(84, 84, 88, 0.6);
  --ds-overlay: rgba(0, 0, 0, 0.55);
  --ds-label: #f5f5f7;
  --ds-secondary: #a1a1a6;
  --ds-accent: #c39bff;
  --ds-accent-fill: #6d2fc4;
  --ds-accent-tint: #2a1f3d;
  --ds-red: #ff6961;
  --ds-green: #4cd17f;
  --ds-shadow: none;
  --ds-glass: rgba(0, 0, 0, 0.72);
}

@media (prefers-contrast: more) {
  :root { --ds-secondary: #4a4a4f; --ds-separator: rgba(60, 60, 67, 0.45); }
}

html { -webkit-text-size-adjust: 100%; }

html body {
  font-family: var(--ds-font);
  color: var(--ds-label);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--ds-accent) !important;
  outline-offset: 2px;
}

/* Text inputs: 16px+ so iOS Safari does not zoom on focus */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html body select,
html body textarea {
  font-family: var(--ds-font);
  font-size: max(1rem, 16px);
  color: var(--ds-label);
  background-color: var(--ds-cell);
  border: 1px solid var(--ds-separator);
  border-radius: 10px;
  box-shadow: none;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 22%, transparent);
  outline: none;
}
html body ::placeholder { color: var(--ds-secondary); opacity: 1; }

/* Motion is decoration here, never information */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}