/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ===== Theme palettes ===== */

:root,
[data-theme="nord-dark"] {
  --page-bg: #2E3440;
  --surface-bg: #3B4252;
  --surface-hover-bg: #434C5E;
  --code-bg: #242933;
  --border-color: #4C566A;
  --text-primary: #ECEFF4;
  --text-secondary: #D8DEE9;
  --text-muted: #616E88;
  --accent-primary: #88C0D0;
  --accent-primary-hover: #8FBCBB;
  --accent-admin: #B48EAD;
  --accent-admin-hover: #D08770;
  --accent-success: #A3BE8C;
  --accent-success-hover: #EBCB8B;
  --accent-warning: #EBCB8B;
  --accent-danger: #BF616A;
  --accent-skip: #D08770;
  --accent-skip-hover: #EBCB8B;
  --frost-blue: #5E81AC;
  --frost-blue-hover: #81A1C1;
  --frost-light: #81A1C1;
  --frost-green: #8FBCBB;

  --code-text: #ECEFF4;
  --code-highlight-bg: #4C566A;
  --code-keyword: #B48EAD;
  --code-function: #88C0D0;
  --code-class: #8FBCBB;
  --code-variable: #E5E9F0;
  --code-string: #A3BE8C;
  --code-number: #EBCB8B;
  --code-operator: #D08770;
  --code-punctuation: #81A1C1;
  --code-comment: #A3BE8C;
  --code-builtin: #81A1C1;
  --code-error: #BF616A;
}

[data-theme="nord-light"] {
  --page-bg: #ECEFF4;
  --surface-bg: #E5E9F0;
  --surface-hover-bg: #D8DEE9;
  --code-bg: #D8DEE9;
  --border-color: #4C566A;
  --text-primary: #2E3440;
  --text-secondary: #3B4252;
  --text-muted: #616E88;
  --accent-primary: #5E81AC;
  --accent-primary-hover: #81A1C1;
  --accent-admin: #B48EAD;
  --accent-admin-hover: #D08770;
  --accent-success: #A3BE8C;
  --accent-success-hover: #8FBCBB;
  --accent-warning: #D08770;
  --accent-danger: #BF616A;
  --accent-skip: #D08770;
  --accent-skip-hover: #EBCB8B;
  --frost-blue: #5E81AC;
  --frost-blue-hover: #81A1C1;
  --frost-light: #5E81AC;
  --frost-green: #8FBCBB;

  --code-text: #2E3440;
  --code-highlight-bg: #D8DEE9;
  --code-keyword: #B48EAD;
  --code-function: #5E81AC;
  --code-class: #8FBCBB;
  --code-variable: #3B4252;
  --code-string: #A3BE8C;
  --code-number: #D08770;
  --code-operator: #D08770;
  --code-punctuation: #5E81AC;
  --code-comment: #616E88;
  --code-builtin: #5E81AC;
  --code-error: #BF616A;
}

[data-theme="dark"] {
  --page-bg: #1a1a1a;
  --surface-bg: #262626;
  --surface-hover-bg: #333333;
  --code-bg: #171717;
  --border-color: #404040;
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --accent-primary: #60a5fa;
  --accent-primary-hover: #93c5fd;
  --accent-admin: #c084fc;
  --accent-admin-hover: #d8b4fe;
  --accent-success: #4ade80;
  --accent-success-hover: #86efac;
  --accent-warning: #facc15;
  --accent-danger: #f87171;
  --accent-skip: #fb923c;
  --accent-skip-hover: #fdba74;
  --frost-blue: #60a5fa;
  --frost-blue-hover: #93c5fd;
  --frost-light: #93c5fd;
  --frost-green: #4ade80;

  --code-text: #f5f5f5;
  --code-highlight-bg: #333333;
  --code-keyword: #c084fc;
  --code-function: #60a5fa;
  --code-class: #4ade80;
  --code-variable: #e5e5e5;
  --code-string: #4ade80;
  --code-number: #facc15;
  --code-operator: #fb923c;
  --code-punctuation: #93c5fd;
  --code-comment: #737373;
  --code-builtin: #93c5fd;
  --code-error: #f87171;
}

[data-theme="light"] {
  --page-bg: #fafafa;
  --surface-bg: #f5f5f5;
  --surface-hover-bg: #e5e5e5;
  --code-bg: #e5e5e5;
  --border-color: #d4d4d4;
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #a3a3a3;
  --accent-primary: #2563eb;
  --accent-primary-hover: #3b82f6;
  --accent-admin: #9333ea;
  --accent-admin-hover: #a855f7;
  --accent-success: #16a34a;
  --accent-success-hover: #22c55e;
  --accent-warning: #ca8a04;
  --accent-danger: #dc2626;
  --accent-skip: #ea580c;
  --accent-skip-hover: #f97316;
  --frost-blue: #2563eb;
  --frost-blue-hover: #3b82f6;
  --frost-light: #3b82f6;
  --frost-green: #16a34a;

  --code-text: #171717;
  --code-highlight-bg: #e5e5e5;
  --code-keyword: #9333ea;
  --code-function: #2563eb;
  --code-class: #16a34a;
  --code-variable: #525252;
  --code-string: #16a34a;
  --code-number: #ca8a04;
  --code-operator: #ea580c;
  --code-punctuation: #3b82f6;
  --code-comment: #a3a3a3;
  --code-builtin: #3b82f6;
  --code-error: #dc2626;
}

/* ===== Syntax highlighting ===== */

.code-highlight {
  color: var(--code-text);
}

.code-highlight .hll {
  background-color: var(--code-highlight-bg);
}

.code-highlight .k,
.code-highlight .kd,
.code-highlight .kn,
.code-highlight .kp,
.code-highlight .kr,
.code-highlight .kt {
  color: var(--code-keyword);
  font-weight: 700;
}

.code-highlight .nf,
.code-highlight .fm {
  color: var(--code-function);
  font-weight: 700;
}

.code-highlight .nc,
.code-highlight .na,
.code-highlight .nb {
  color: var(--code-class);
  font-weight: 700;
}

.code-highlight .n,
.code-highlight .nv,
.code-highlight .vc,
.code-highlight .vg,
.code-highlight .vi {
  color: var(--code-variable);
}

.code-highlight .s,
.code-highlight .s1,
.code-highlight .s2,
.code-highlight .sh,
.code-highlight .sx,
.code-highlight .sr,
.code-highlight .ss {
  color: var(--code-string);
  font-weight: 700;
}

.code-highlight .mi,
.code-highlight .mf,
.code-highlight .m,
.code-highlight .il {
  color: var(--code-number);
  font-weight: 700;
}

.code-highlight .o,
.code-highlight .ow {
  color: var(--code-operator);
  font-weight: 700;
}

.code-highlight .p {
  color: var(--code-punctuation);
}

.code-highlight .c,
.code-highlight .c1,
.code-highlight .cm,
.code-highlight .cp {
  color: var(--code-comment);
  font-style: italic;
}

.code-highlight .no,
.code-highlight .bp,
.code-highlight .se,
.code-highlight .si {
  color: var(--code-builtin);
  font-weight: 700;
}

.code-highlight .err,
.code-highlight .gr,
.code-highlight .gt {
  color: var(--code-error);
  font-weight: 700;
}