/**
 * Cybr Theme for Super Productivity
 * Author: Dastan (https://github.com/dastanmedetbekov)
 * Colors: Cybr Colors by Kevin Scherrer (https://github.com/scherrer-txt/cybrcolors)
 */

/* Smooth transitions */
:root {
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
}

/* Cybr theme variables */
body.isDarkTheme {
  /* ===============================
   * CYBR COLOR PALETTE
   * ===============================*/

  --cybr-no0: #030408;
  --cybr-no1: #05070d;
  --cybr-no2: #0a0e1a;

  --cybr-wh0: #898d99;

  --cybr-me0: #4d5a80;
  --cybr-me1: color-mix(in srgb, var(--cybr-me0) 40%, transparent);
  --cybr-me2: color-mix(in srgb, var(--cybr-me0) 20%, transparent);

  --cybr-re0: #f24848;
  --cybr-re1: color-mix(in srgb, var(--cybr-re0) 40%, transparent);
  --cybr-re2: color-mix(in srgb, var(--cybr-re0) 20%, transparent);

  --cybr-gr0: #30f291;
  --cybr-gr1: color-mix(in srgb, var(--cybr-gr0) 40%, transparent);
  --cybr-gr2: color-mix(in srgb, var(--cybr-gr0) 20%, transparent);

  --cybr-ye0: #f2d230;
  --cybr-ye1: color-mix(in srgb, var(--cybr-ye0) 40%, transparent);
  --cybr-ye2: color-mix(in srgb, var(--cybr-ye0) 20%, transparent);

  --cybr-bl0: #3061f2;
  --cybr-bl1: color-mix(in srgb, var(--cybr-bl0) 40%, transparent);
  --cybr-bl2: color-mix(in srgb, var(--cybr-bl0) 20%, transparent);

  --cybr-vi0: #a130f2;
  --cybr-vi1: color-mix(in srgb, var(--cybr-vi0) 40%, transparent);
  --cybr-vi2: color-mix(in srgb, var(--cybr-vi0) 20%, transparent);

  --cybr-cy0: #29becc;
  --cybr-cy1: color-mix(in srgb, var(--cybr-cy0) 40%, transparent);
  --cybr-cy2: color-mix(in srgb, var(--cybr-cy0) 20%, transparent);

  --cybr-or0: #f26118;
  --cybr-or1: color-mix(in srgb, var(--cybr-or0) 40%, transparent);
  --cybr-or2: color-mix(in srgb, var(--cybr-or0) 20%, transparent);

  --cybr-pi0: #f230b2;
  --cybr-pi1: color-mix(in srgb, var(--cybr-pi0) 40%, transparent);
  --cybr-pi2: color-mix(in srgb, var(--cybr-pi0) 20%, transparent);

  /* ===============================
   * BACKGROUND COLORS
   * ===============================*/

  /* Main backgrounds */
  --bg: var(--cybr-no0);
  --bg-darker: #000000;
  --bg-slightly-lighter: var(--cybr-no1);
  --bg-lighter: var(--cybr-no2);
  --bg-lightest: var(--cybr-me2);
  --bg-super-light: var(--cybr-me1);

  /* Component backgrounds */
  --card-bg: var(--cybr-no1);
  --sidenav-bg: var(--cybr-no0);
  --selected-task-bg-color: var(--cybr-no2);
  --banner-bg: var(--cybr-no2);

  /* Task backgrounds with better hierarchy */
  --task-c-bg: var(--cybr-no1);
  --task-c-selected-bg: var(--cybr-no2);
  --sub-task-c-bg: var(--cybr-no1);
  --sub-task-c-bg-done: var(--cybr-no0);
  --task-c-bg-done: var(--cybr-no0);
  --task-c-current-bg: var(--cybr-no2);
  --task-c-drag-drop-bg: var(--cybr-no2);
  --sub-task-c-bg-in-selected: var(--cybr-me2);

  /* Note backgrounds */
  --standard-note-bg: var(--cybr-no1);
  --standard-note-bg-hovered: var(--cybr-no2);

  /* Planner specific */
  --planner-task-bg: var(--cybr-no1);
  --planner-days-bg: var(--cybr-no0);

  /* ===============================
   * TEXT COLORS
   * ===============================*/

  --text-color: var(--cybr-re0);
  --text-color-less-intense: color-mix(in srgb, var(--cybr-re0) 87%, transparent);
  --text-color-muted: var(--cybr-wh0);
  --text-color-more-intense: var(--cybr-re0);
  --text-color-most-intense: var(--cybr-re0);

  /* Note text */
  --standard-note-fg: var(--cybr-re0);

  /* Task detail */
  --task-detail-value-color: var(--cybr-wh0);

  /* ===============================
   * BORDERS & SEPARATORS
   * ===============================*/

  --extra-border-color: var(--cybr-me2);
  --separator-color: color-mix(in srgb, var(--cybr-me0) 40%, transparent);
  --divider-color: var(--cybr-me2);

  /* Chip borders */
  --chip-outline-color: var(--cybr-re2);

  /* ===============================
   * ACCENT & THEME COLORS
   * ===============================*/

  /* Cyberpunk Cyan secondary focus */
  --palette-accent-500: var(--cybr-cy0);
  --c-accent: var(--cybr-cy0);
  --palette-accent-100: color-mix(in srgb, var(--cybr-cy0) 20%, #ffffff);
  --palette-accent-200: color-mix(in srgb, var(--cybr-cy0) 40%, #ffffff);
  --palette-accent-300: color-mix(in srgb, var(--cybr-cy0) 60%, #ffffff);
  --palette-accent-400: color-mix(in srgb, var(--cybr-cy0) 80%, #ffffff);
  --palette-accent-600: color-mix(in srgb, var(--cybr-cy0) 80%, #000000);
  --palette-accent-700: color-mix(in srgb, var(--cybr-cy0) 60%, #000000);
  --palette-accent-800: color-mix(in srgb, var(--cybr-cy0) 40%, #000000);
  --palette-accent-900: color-mix(in srgb, var(--cybr-cy0) 20%, #000000);

  /* Semantic colors */
  --c-success: var(--cybr-gr0);
  --c-warning: var(--cybr-ye0);
  --c-error: var(--cybr-re0);
  --c-info: var(--cybr-bl0);

  /* ===============================
   * UI ELEMENTS
   * ===============================*/

  /* Scrollbar */
  --scrollbar-thumb: var(--cybr-me0);
  --scrollbar-thumb-hover: var(--cybr-gr0);
  --scrollbar-track: var(--cybr-no1);

  /* Close button */
  --close-btn-bg: var(--cybr-no2);
  --close-btn-border: transparent;

  /* Select/Options */
  --select-hover-bg: var(--cybr-cy2);
  --options-border-color: var(--cybr-cy1);

  /* Attachments */
  --attachment-bg: var(--cybr-no2);
  --attachment-border: transparent;
  --attachment-control-bg: rgba(0, 0, 0, 0.4);
  --attachment-control-border: transparent;
  --attachment-control-hover-bg: rgba(0, 0, 0, 0.8);

  /* Grid */
  --grid-color: var(--cybr-me2);

  /* Progress */
  --progress-bg: var(--cybr-me2);

  /* Improvement banner */
  --improvement-text: var(--cybr-re0);
  --improvement-border: var(--cybr-cy1);
  --improvement-button-text: #ffffff;

  /* Special backgrounds */
  --color-background-color-options: var(--cybr-no2);
  --color-background-text-field: var(--cybr-no2);
  --color-background-dark: var(--cybr-no0);
  --color-background-notes: var(--cybr-no1);
  --color-background-inline-markdown: var(--cybr-me2);
  --color-background-button-shadow: var(--cybr-gr0);

  /* ===============================
   * SHADOWS - SUBTLE
   * ===============================*/

  --shadow-key-umbra-opacity: 0.15;
  --shadow-key-penumbra-opacity: 0.1;
  --shadow-ambient-shadow-opacity: 0.08;

  /* Task shadows */
  --task-current-shadow: 0 0 8px var(--cybr-gr1), 0 2px 8px var(--cybr-no0);
  --task-selected-shadow: 0 0 4px var(--cybr-cy2), 0 1px 4px var(--cybr-no1);

  /* ===============================
   * HOVER CONTROLS
   * ===============================*/

  --hover-controls-border: 1px solid var(--cybr-cy1);
  --hover-controls-border-opacity: 0.5;

  /* ===============================
   * INTERACTION STATES
   * ===============================*/

  --hover-bg-opacity: 0.08;
  --focus-bg-opacity: 0.12;
  --pressed-bg-opacity: 0.16;
  --disabled-opacity: 0.3;
}

/* Apply background and text colors */
body,
body.isDarkTheme {
  background-color: var(--bg);
  color: var(--text-color) !important;
  font-family:
    'Courier New', 'Consolas', 'Monaco', 'Lucida Console', monospace !important;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
}

/* Page wrapper */
body .page-wrapper,
body.isDarkTheme .page-wrapper {
  color: var(--text-color) !important;
  font-family:
    'Courier New', 'Consolas', 'Monaco', 'Lucida Console', monospace !important;
}

/* Links */
a,
body a[href],
body.isDarkTheme a[href] {
  color: var(--c-accent);
  text-decoration: none;
  transition:
    opacity var(--transition-fast),
    text-shadow var(--transition-fast);
}

a:hover,
body a[href]:hover,
body.isDarkTheme a[href]:hover {
  opacity: 0.8;
  text-shadow: 0 0 8px var(--cybr-cy1);
}

/* Smooth hover states */
.task-c:hover,
.sub-task-c:hover {
  background-color: var(--task-c-selected-bg);
  transition: background-color var(--transition-fast);
  border-left: 2px solid var(--c-accent);
}

/* Current task */
.task-c.isCurrent {
  border-left: 3px solid var(--c-accent);
  box-shadow: 0 0 12px var(--cybr-cy2);
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  box-shadow: 0 0 8px var(--cybr-cy1);
}

/* Material overrides */
body.isDarkTheme {
  --mat-theme-surface: var(--card-bg);
  --mat-theme-on-surface: var(--text-color);
  --mat-theme-background: var(--bg);
  --mat-theme-primary: var(--c-accent);
  --mat-fab-small-container-color: var(--c-accent);
  --mat-sys-primary-container: var(--c-accent);
}
