/*
 * 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: #202124;
  --surface-bg: #2B2C30;
  --surface-hover-bg: #36383D;
  --code-bg: #17191D;
  --border-color: #5F6368;
  --text-primary: #F1F3F4;
  --text-secondary: #D2D5DA;
  --text-muted: #AEB4BD;
  --accent-primary: #7DB7FF;
  --accent-primary-hover: #A8CCFF;
  --accent-admin: #D7A7FF;
  --accent-admin-hover: #E7C5FF;
  --accent-success: #7DDC8B;
  --accent-success-hover: #A8EAB2;
  --accent-warning: #FFD166;
  --accent-danger: #FF8A8A;
  --accent-skip: #FFB06E;
  --accent-skip-hover: #FFC894;
  --frost-blue: #8AB4F8;
  --frost-blue-hover: #B6D2FF;
  --frost-light: #B6D2FF;
  --frost-green: #8FD6C7;

  --code-text: #F1F3F4;
  --code-highlight-bg: #36383D;
  --code-keyword: #D7A7FF;
  --code-function: #7DB7FF;
  --code-class: #8FD6C7;
  --code-variable: #D2D5DA;
  --code-string: #7DDC8B;
  --code-number: #FFD166;
  --code-operator: #FFB06E;
  --code-punctuation: #B6D2FF;
  --code-comment: #AEB4BD;
  --code-builtin: #B6D2FF;
  --code-error: #FF8A8A;
}

[data-theme="light"] {
  --page-bg: #F8F9FA;
  --surface-bg: #EEF0F2;
  --surface-hover-bg: #E1E4E8;
  --code-bg: #E9ECEF;
  --border-color: #6B7280;
  --text-primary: #202124;
  --text-secondary: #3C4043;
  --text-muted: #5F6368;
  --accent-primary: #1557B0;
  --accent-primary-hover: #0F5AA8;
  --accent-admin: #8E3AC8;
  --accent-admin-hover: #7B2CBF;
  --accent-success: #137333;
  --accent-success-hover: #0F6B2B;
  --accent-warning: #9A5B00;
  --accent-danger: #B3261E;
  --accent-skip: #A94D00;
  --accent-skip-hover: #8F4200;
  --frost-blue: #0F5AA8;
  --frost-blue-hover: #1557B0;
  --frost-light: #1F5FBF;
  --frost-green: #12796B;

  --code-text: #202124;
  --code-highlight-bg: #E1E4E8;
  --code-keyword: #8E3AC8;
  --code-function: #1557B0;
  --code-class: #12796B;
  --code-variable: #3C4043;
  --code-string: #137333;
  --code-number: #9A5B00;
  --code-operator: #A94D00;
  --code-punctuation: #1F5FBF;
  --code-comment: #5F6368;
  --code-builtin: #1F5FBF;
  --code-error: #B3261E;
}

/* ===== 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;
}