/* EyeApp design tokens — generated by Hallmark
 * genre: modern-minimal · theme: custom (clinical blue-slate)
 * Import this before styles.css
 */

:root {
  /* ── Surfaces ── */
  --color-paper:        oklch(97.5% 0.004 240);
  --color-paper-2:      oklch(93.5% 0.006 240);
  --color-paper-3:      oklch(89%   0.008 240);
  --color-side:         oklch(17%   0.022 250);
  --color-side-hover:   oklch(23%   0.020 250);
  --color-side-active:  oklch(27%   0.020 250);

  /* ── Ink ── */
  --color-ink:          oklch(15%   0.020 255);
  --color-ink-2:        oklch(46%   0.015 250);
  --color-ink-3:        oklch(65%   0.010 245);
  --color-ink-side:     oklch(60%   0.012 240);
  --color-ink-side-hi:  oklch(96%   0.005 240);

  /* ── Borders ── */
  --color-rule:         oklch(87%   0.007 240);
  --color-rule-2:       oklch(79%   0.010 240);
  --color-rule-side:    oklch(24%   0.018 250);

  /* ── Accent ── */
  --color-accent:       oklch(52%   0.170 238);
  --color-accent-hi:    oklch(46%   0.170 238);
  --color-accent-dim:   oklch(52%   0.170 238 / 0.12);
  --color-accent-ink:   oklch(99%   0     0);
  --color-focus:        oklch(58%   0.200 238);

  /* ── Danger ── */
  --color-danger:       oklch(52%   0.190  24);
  --color-danger-hi:    oklch(46%   0.190  24);
  --color-danger-dim:   oklch(52%   0.190  24 / 0.10);

  /* ── Eye system ── */
  --color-re:           oklch(54%   0.170 238);
  --color-re-surface:   oklch(94.5% 0.040 238);
  --color-re-border:    oklch(82%   0.090 238);
  --color-le:           oklch(50%   0.150 162);
  --color-le-surface:   oklch(94.5% 0.040 162);
  --color-le-border:    oklch(82%   0.090 162);
  --color-be:           oklch(50%   0.150 285);
  --color-be-surface:   oklch(94.5% 0.040 285);
  --color-be-border:    oklch(82%   0.090 285);

  /* ── Status ── */
  --color-missed:                  oklch(52%   0.190  24);
  --color-missed-surface:          oklch(97%   0.040  24);
  --color-missed-border:           oklch(88%   0.090  24);
  --color-needs-scheduling:        oklch(55%   0.150  55);
  --color-needs-scheduling-surface:oklch(97%   0.040  55);
  --color-needs-scheduling-border: oklch(88%   0.090  55);
  --color-done:                    oklch(50%   0.140 150);
  --color-done-surface:            oklch(97%   0.040 150);
  --color-done-border:             oklch(88%   0.090 150);
  --color-for-next:                oklch(48%   0.170 238);
  --color-for-next-surface:        oklch(97%   0.040 238);
  --color-for-next-border:         oklch(86%   0.090 238);
  --color-needs-review:            oklch(50%   0.180 290);
  --color-needs-review-surface:    oklch(97%   0.040 290);
  --color-needs-review-border:     oklch(86%   0.090 290);

  /* ── Typography ── */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --text-2xs: 0.625rem;
  --text-xs:  0.6875rem;
  --text-sm:  0.8125rem;
  --text-md:  0.875rem;
  --text-lg:  1rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;

  /* ── Spacing (4pt scale) ── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;

  /* ── Radius ── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.40, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-short:   160ms;

  /* ── Layout ── */
  --sidebar-w: 224px;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:        oklch(13%   0.014 245);
    --color-paper-2:      oklch(18%   0.016 245);
    --color-paper-3:      oklch(23%   0.018 245);
    --color-side:         oklch(9%    0.012 245);
    --color-side-hover:   oklch(15%   0.015 245);
    --color-side-active:  oklch(19%   0.018 245);

    --color-ink:          oklch(93%   0.008 240);
    --color-ink-2:        oklch(59%   0.012 245);
    --color-ink-3:        oklch(40%   0.010 245);
    --color-ink-side:     oklch(58%   0.012 240);
    --color-ink-side-hi:  oklch(94%   0.005 240);

    --color-rule:         oklch(26%   0.018 245);
    --color-rule-2:       oklch(33%   0.018 245);
    --color-rule-side:    oklch(16%   0.016 245);

    --color-accent:       oklch(64%   0.190 238);
    --color-accent-hi:    oklch(58%   0.190 238);
    --color-accent-dim:   oklch(64%   0.190 238 / 0.15);
    --color-accent-ink:   oklch(8%    0.020 245);
    --color-focus:        oklch(68%   0.220 238);

    --color-danger:       oklch(65%   0.190  24);
    --color-danger-hi:    oklch(60%   0.190  24);
    --color-danger-dim:   oklch(65%   0.190  24 / 0.12);

    --color-re:           oklch(68%   0.180 238);
    --color-re-surface:   oklch(20%   0.060 238);
    --color-re-border:    oklch(34%   0.100 238);
    --color-le:           oklch(64%   0.160 162);
    --color-le-surface:   oklch(20%   0.060 162);
    --color-le-border:    oklch(34%   0.100 162);
    --color-be:           oklch(64%   0.160 285);
    --color-be-surface:   oklch(20%   0.060 285);
    --color-be-border:    oklch(34%   0.100 285);

    --color-missed:                  oklch(68%   0.190  24);
    --color-missed-surface:          oklch(18%   0.060  24);
    --color-missed-border:           oklch(32%   0.100  24);
    --color-needs-scheduling:        oklch(68%   0.150  55);
    --color-needs-scheduling-surface:oklch(18%   0.060  55);
    --color-needs-scheduling-border: oklch(32%   0.100  55);
    --color-done:                    oklch(64%   0.150 150);
    --color-done-surface:            oklch(18%   0.060 150);
    --color-done-border:             oklch(32%   0.100 150);
    --color-for-next:                oklch(64%   0.170 238);
    --color-for-next-surface:        oklch(18%   0.060 238);
    --color-for-next-border:         oklch(32%   0.100 238);
    --color-needs-review:            oklch(70%   0.180 290);
    --color-needs-review-surface:    oklch(18%   0.060 290);
    --color-needs-review-border:     oklch(34%   0.100 290);
  }
}