/*
  Panel tokens. Every value a component uses comes from here.
  Themes: light by default, dark from prefers-color-scheme, and
  data-theme="light" or data-theme="dark" on any element overrides both.
  Status: Proposed (philosophy-dependent).
*/

:root,
[data-theme="light"] {
  color-scheme: light;

  --pn-color-bg: #f0f0f0;
  --pn-color-surface: #ffffff;
  --pn-color-surface-sunken: #f0f0f0;
  --pn-color-surface-hover: #f6f6f6;
  --pn-color-text: #000000;
  --pn-color-text-muted: #666666;
  --pn-color-border: #e0e0e0;
  --pn-color-border-control: #d4d4d4;
  --pn-color-overlay: rgb(0 0 0 / 0.6);

  --pn-color-rail: #e8e8e8;
  --pn-color-rail-border: #dedede;
  --pn-color-rail-hover: rgb(255 255 255 / 0.55);
  --pn-color-rail-line: rgb(0 0 0 / 0.08);

  --pn-color-fill: #e2e2e2;
  --pn-color-fill-hover: #d8d8d8;

  --pn-color-accent: #1c1c1c;
  --pn-color-accent-hover: #333333;
  --pn-color-on-accent: #ffffff;
  --pn-color-focus: #3a84d4;

  --pn-color-tag: #1c1c1c;
  --pn-color-on-tag: #ffffff;

  --pn-color-positive: #4a5e0f;
  --pn-color-positive-soft: #dcebb6;
  --pn-color-notice: #7f430a;
  --pn-color-notice-soft: #f8d2ad;
  --pn-color-negative: #a31d1d;
  --pn-color-negative-soft: #f8c9c9;
  --pn-color-info: #1b5896;
  --pn-color-info-soft: #c9def4;

  --pn-shadow-card: 0 1px 3px rgb(0 0 0 / 0.09), 0 1px 1px rgb(0 0 0 / 0.03);
  --pn-shadow-raised: 0 18px 28px -6px rgb(0 0 0 / 0.14), 0 8px 12px -6px rgb(0 0 0 / 0.07);
}

[data-theme="dark"] {
  color-scheme: dark;

  --pn-color-bg: #1f1f1f;
  --pn-color-surface: #303030;
  --pn-color-surface-sunken: #1f1f1f;
  --pn-color-surface-hover: #383838;
  --pn-color-text: #ffffff;
  --pn-color-text-muted: #adadad;
  --pn-color-border: #404040;
  --pn-color-border-control: #4d4d4d;
  --pn-color-overlay: rgb(0 0 0 / 0.7);

  --pn-color-rail: #121212;
  --pn-color-rail-border: #2a2a2a;
  --pn-color-rail-hover: rgb(255 255 255 / 0.06);
  --pn-color-rail-line: rgb(255 255 255 / 0.08);

  --pn-color-fill: #141414;
  --pn-color-fill-hover: #2a2a2a;

  --pn-color-accent: #f0f0f0;
  --pn-color-accent-hover: #ffffff;
  --pn-color-on-accent: #121212;
  --pn-color-focus: #6aa6ea;

  --pn-color-tag: #121212;
  --pn-color-on-tag: #ffffff;

  --pn-color-positive: #b8d77a;
  --pn-color-positive-soft: #2e3b16;
  --pn-color-notice: #f4b57c;
  --pn-color-notice-soft: #4a2c10;
  --pn-color-negative: #f5a0a0;
  --pn-color-negative-soft: #4d1c1c;
  --pn-color-info: #92c1f0;
  --pn-color-info-soft: #18324f;

  --pn-shadow-card: 0 1px 3px rgb(0 0 0 / 0.25), 0 1px 1px rgb(0 0 0 / 0.15);
  --pn-shadow-raised: 0 18px 28px -6px rgb(0 0 0 / 0.45), 0 8px 12px -6px rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --pn-color-bg: #1f1f1f;
    --pn-color-surface: #303030;
    --pn-color-surface-sunken: #1f1f1f;
    --pn-color-surface-hover: #383838;
    --pn-color-text: #ffffff;
    --pn-color-text-muted: #adadad;
    --pn-color-border: #404040;
    --pn-color-border-control: #4d4d4d;
    --pn-color-overlay: rgb(0 0 0 / 0.7);

    --pn-color-rail: #121212;
    --pn-color-rail-border: #2a2a2a;
    --pn-color-rail-hover: rgb(255 255 255 / 0.06);
    --pn-color-rail-line: rgb(255 255 255 / 0.08);

    --pn-color-fill: #141414;
    --pn-color-fill-hover: #2a2a2a;

    --pn-color-accent: #f0f0f0;
    --pn-color-accent-hover: #ffffff;
    --pn-color-on-accent: #121212;
    --pn-color-focus: #6aa6ea;

    --pn-color-tag: #121212;
    --pn-color-on-tag: #ffffff;

    --pn-color-positive: #b8d77a;
    --pn-color-positive-soft: #2e3b16;
    --pn-color-notice: #f4b57c;
    --pn-color-notice-soft: #4a2c10;
    --pn-color-negative: #f5a0a0;
    --pn-color-negative-soft: #4d1c1c;
    --pn-color-info: #92c1f0;
    --pn-color-info-soft: #18324f;

    --pn-shadow-card: 0 1px 3px rgb(0 0 0 / 0.25), 0 1px 1px rgb(0 0 0 / 0.15);
    --pn-shadow-raised: 0 18px 28px -6px rgb(0 0 0 / 0.45), 0 8px 12px -6px rgb(0 0 0 / 0.35);
  }
}

:root {
  --pn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pn-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pn-text-xs: 0.75rem;
  --pn-text-sm: 0.875rem;
  --pn-text-md: 1rem;
  --pn-text-lg: 1.25rem;
  --pn-text-xl: 1.75rem;

  --pn-leading-tight: 1.25;
  --pn-leading-normal: 1.5;

  --pn-weight-normal: 400;
  --pn-weight-medium: 500;
  --pn-weight-bold: 600;

  --pn-space-1: 0.25rem;
  --pn-space-2: 0.5rem;
  --pn-space-3: 0.75rem;
  --pn-space-4: 1rem;
  --pn-space-5: 1.5rem;
  --pn-space-6: 2rem;
  --pn-space-7: 3rem;

  --pn-grid-columns: 6;
  --pn-grid-gap: var(--pn-space-5);

  --pn-control-height: 2rem;
  --pn-input-height: 2.25rem;
  --pn-control-height-sm: 1.5rem;

  --pn-radius-sm: 0.125rem;
  --pn-radius-md: 0.25rem;
  --pn-radius-lg: 0.5rem;
  --pn-radius-pill: 999px;
  --pn-border-width: 1px;

  --pn-focus-width: 2px;
  --pn-focus-offset: 2px;

  --pn-duration: 120ms;

  --pn-layer-drawer: 100;
  --pn-layer-dialog: 200;
  --pn-layer-toast: 300;
}