/*
 * DEFAULT (MATRIX) THEME
 * Table of contents:
 * Copy and search any of the following lines to navigate the stylesheet:
 */
/* TOKENS */
/* 1. Fonts */
/* 2. Colors */
/* 3. Box shadows */
/* 4. Text */
/* 5. Borders */
/* SURFACES */
/* 6. Cards and Modals */
/* 7. Navbar */
/* 8. Panels and Toolbars */
/* 9. Tooltips */
/* 10. Menus */
/* COMPONENTS */
/* 11. Buttons and Icons */
/* 12. Inputs */
/* 13. Checkbox */
/* 14. RadioButton */
/* 15. TextEditor */
/* 16. Tabs */
/* 17. Progress Bar */
/* 18. Table */
/* 19. Skeleton */
/*
 * NOTE: Variable names can only be changed in the following sections:
 * 1. Fonts
 * 2. Colors
 * 3. Text
 * In all other sections, only values can be modified, but variable names must remain unchanged.
 *
 * Abbreviations:
 * - bg: background
 * - btn: button
 * - clr: color
 * - cta: call to action
 * - ff: font-family
 * - td: table data
 * - th: table header
 * - txt: text
 *
 * Naming convention:
 * --[component]-[?prominence]-[?element]-[?color type]-clr-[?state]
 * where:
 * - component  (mandatory): e.g., input, checkbox, table
 * - prominence  (optional): primary | secondary | danger
 * - element     (optional): e.g., placeholder, checkmark, th
 * - color type  (optional): bg | txt | border | icon | outline
 * - state       (optional): hover | disabled | invalid | selected
 *
 * Examples:
 * --btn-primary-txt-clr-disabled (text color of a primary disabled button)
 * --input-placeholder-clr (color of an input placeholder)
 */

/*
 * Name the stylesheet based on the value in the data-theme attribute:
 * If [data-theme="default"], name the file as default-theme.css.
 */
[data-theme="default"] {
  /* TOKENS */
  /* 1. Fonts */
  --app-ff--primary: "VT323", monospace;
  --app-clr-scheme: only dark; /* Use `only light` for light themes */

  /* 2. Colors */
  --clr-primary-light: #18d87b;
  --clr-primary-medium-light: #26c075;
  --clr-primary: #03a061;
  --clr-primary-medium-dark: #00663d;

  --clr-neutral-lightest: #d4d4d4;
  --clr-neutral-light: #878787;
  --clr-neutral-medium-light: #4f4f4f;
  --clr-neutral: #383838;
  --clr-neutral-medium-dark: #262626;
  --clr-neutral-dark: #1f1f1f;

  --clr-danger: #e14c41;
  --clr-danger-dark: #bc2c22;
  --clr-danger-darker: #833b34;
  --clr-danger-darkest: #361e1c;

  --clr-accent-high-contrast: #ffffff;
  --clr-accent-low-contrast: #000000;
  --clr-transparent-higher-contrast: rgba(255, 255, 255, 0.22);
  --clr-transparent-high-contrast: rgba(255, 255, 255, 0.11);
  --clr-transparent: rgba(255, 255, 255, 0);
  --clr-transparent-low-contrast: rgba(0, 0, 0, 0.6);
  --clr-transparent-danger: hsla(15, 97%, 56%, 0.22);

  /* 3. Box shadows */
  --box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;

  /* 4. Text */
  --clr-txt-heading-primary: var(--clr-primary); /* Main title in login and user update pages */
  --clr-txt-heading-secondary: var(--clr-neutral-lightest); /* Supporting text in login and user update pages */
  --clr-txt-body: var(--clr-primary-medium-light); /* Default text color in the app */
  --clr-txt-body-hover: var(--clr-primary-light); /* Fallback hover text color */

  /* 5. Borders */
  --clr-border-high-contrast: var(--clr-primary-light);
  --clr-border-medium-contrast: var(--clr-primary-medium-dark);
  --clr-border-low-contrast: var(--clr-transparent-higher-contrast);
  --clr-border-no-contrast: var(--clr-transparent);

  /* SURFACES */
  /* 6. Cards and Modals */
  --clr-overlay: var(--clr-transparent-low-contrast); /* Overlay color for modals */
  --card-bg-clr: var(--clr-neutral-medium-dark); /* Card/modal background (login, update user pages) */
  --card-border-clr: var(--clr-border-low-contrast); /* Subtle border for modal headers */
  --card-box-shadow: none; /* Card box shadow (login, update user pages) */
  --card-surface-around-bg-clr: var(--clr-accent-low-contrast); /* Background around cards (login, update user pages) */

  /* 7. Navbar */
  --navbar-bg-clr: var(--clr-neutral-medium-light);
  --navbar-bg-clr-hover: var(--clr-neutral);
  --navbar-txt-clr: var(--clr-primary-light);
  --navbar-txt-clr-hover: var(--navbar-txt-clr);
  --navbar-border-clr: var(--clr-transparent-higher-contrast);
  --navbar-outline-clr: var(--navbar-txt-clr-hover);
  --navbar-logo-txt-clr: var(--navbar-txt-clr-hover);

  /* Call-To-Action (CTA) button: user email button in the navbar */
  --navbar-cta-bg-clr: var(--navbar-bg-clr);
  --navbar-cta-bg-clr-hover: var(--navbar-bg-clr-hover);
  --navbar-cta-txt-clr: var(--navbar-txt-clr);
  --navbar-cta-txt-clr-hover: var(--navbar-txt-clr-hover);
  --navbar-cta-outline-clr: var(--navbar-outline-clr);

  /* 8. Panels and toolbars */
  /* Left panels on the home and APIs editor pages, and right panel on the home page */
  --panel-bg-clr: var(--clr-neutral-dark);
  --panel-bg-clr-hover: var(--clr-transparent-higher-contrast);
  --panel-border-clr: var(--clr-border-low-contrast);

  /* Middle section on the home page and right section in the APIs Editor */
  --main-content-bg-clr: var(--clr-accent-low-contrast);
  --main-content-bg-clr-hover: var(--clr-transparent-higher-contrast);
  --main-content-border-clr: var(--clr-border-low-contrast);

  /* Toolbars at the top of each panel or section */
  --toolbar-txt-clr: var(--clr-primary-medium-light);
  --toolbar-txt-clr-disabled: var(--btn-secondary-txt-clr-disabled);
  --toolbar-txt-clr-hover: var(--toolbar-txt-clr);

  /* 9. Tooltips */
  --tooltip-bg-clr: var(--clr-neutral-medium-light);
  --tooltip-txt-clr: var(--clr-accent-high-contrast);
  --tooltip-arrow-clr: var(--tooltip-bg-clr);

  /* 10. Menus */
  /* Dropdown menus in the navbar, and left and right toolbars on the home page */
  --menu-bg-clr: var(--clr-neutral-medium-light);
  --menu-bg-clr-hover: var(--clr-neutral);
  --menu-txt-clr: var(--clr-txt-body);
  --menu-txt-clr-hover: var(--menu-txt-clr);
  --menu-icon-clr: var(--clr-primary);
  --menu-icon-clr-hover: var(--menu-icon-clr);
  --menu-heading-txt-clr: var(--clr-primary-light);
  --menu-border-clr: var(--clr-border-low-contrast);
  --menu-box-shadow: var(--box-shadow);

  /* COMPONENTS */
  /* 11. Buttons and Icons */
  /* Primary Buttons:
    Used for main actions that need to attract the user's attention.
  */
  --btn-primary-bg-clr: var(--clr-primary);
  --btn-primary-bg-clr-hover: var(--clr-primary-medium-light);
  --btn-primary-bg-clr-disabled: var(--clr-primary);
  --btn-primary-txt-clr: var(--clr-accent-high-contrast);
  --btn-primary-txt-clr-hover: var(--btn-primary-txt-clr);
  --btn-primary-txt-clr-disabled: var(--clr-primary-light);
  --btn-primary-icon-clr: var(--btn-primary-txt-clr);
  --btn-primary-icon-clr-hover: var(--btn-primary-icon-clr);
  --btn-primary-icon-clr-disabled: var(--btn-primary-txt-clr-disabled);
  --btn-primary-outline-clr: var(--clr-primary);

  /* Secondary Buttons:
    Used for less critical actions or canceling/closing.
  */
  --btn-secondary-bg-clr: var(--clr-transparent);
  --btn-secondary-bg-clr-hover: var(--clr-transparent-higher-contrast);
  --btn-secondary-bg-clr-disabled: var(--clr-transparent);
  --btn-secondary-txt-clr: var(--clr-primary-medium-light);
  --btn-secondary-txt-clr-hover: var(--btn-secondary-txt-clr);
  --btn-secondary-txt-clr-disabled: var(--clr-primary-medium-dark);
  --btn-secondary-icon-clr: var(--btn-secondary-txt-clr);
  --btn-secondary-icon-clr-hover: var(--clr-primary-light);
  --btn-secondary-icon-clr-disabled: var(--btn-secondary-txt-clr-disabled);
  --btn-secondary-outline-clr: var(--btn-primary-outline-clr);

  /* Danger Buttons:
    Used for destructive or irreversible actions.
  */
  --btn-danger-bg-clr: var(--clr-transparent);
  --btn-danger-bg-clr-hover: var(--clr-transparent-danger);
  --btn-danger-bg-clr-disabled: var(--btn-danger-bg-clr);
  --btn-danger-txt-clr: var(--clr-danger);
  --btn-danger-txt-clr-hover: var(--btn-danger-txt-clr);
  --btn-danger-txt-clr-disabled: var(--clr-danger-darker);
  --btn-danger-icon-clr: var(--btn-danger-txt-clr);
  --btn-danger-icon-clr-hover: var(--btn-danger-icon-clr);
  --btn-danger-icon-clr-disabled: var(--btn-danger-txt-clr-disabled);
  --btn-danger-outline-clr: var(--btn-danger-txt-clr);

  /* 12. Inputs */
  /* InputText and InputPassword */
  --input-bg-clr: var(--clr-transparent-high-contrast);
  --input-bg-clr-hover: var(--input-bg-clr);
  --input-bg-clr-disabled: var(--input-bg-clr);
  --input-bg-clr-invalid: var(--clr-transparent-danger);
  --input-txt-clr: var(--clr-primary-light);
  --input-txt-clr-hover: var(--input-txt-clr);
  --input-txt-clr-disabled: var(--clr-primary-medium-dark);
  --input-txt-clr-invalid: var(--btn-danger-txt-clr);
  --input-caret-clr: var(--input-txt-clr);
  --input-placeholder-clr: var(--clr-primary-medium-light);
  --input-placeholder-clr-disabled: var(--input-txt-clr-disabled);
  --input-placeholder-clr-invalid: var(--btn-danger-txt-clr-disabled);
  --input-border-clr: var(--clr-border-no-contrast);
  --input-border-clr-hover: var(--clr-border-high-contrast);
  --input-border-clr-disabled: var(--input-border-clr);
  --input-border-clr-invalid: var(--input-border-clr);
  --input-border-clr-invalid-hover: var(--input-txt-clr-invalid);

  /* Icon and button colors in input components, such as InputPassword. */
  --input-icon-clr: var(--input-placeholder-clr);
  --input-icon-clr-hover: var(--input-icon-clr);
  --input-icon-clr-disabled: var(--input-txt-clr-disabled);
  --input-icon-clr-invalid: var(--input-placeholder-clr-invalid);
  --input-icon-button-bg-clr: var(--clr-transparent);
  --input-icon-button-bg-clr-hover: var(--clr-transparent);
  --input-icon-button-border-clr: var(--clr-border-no-contrast);
  --input-icon-button-border-clr-hover: var(--input-border-clr-hover);

  /* 13. Checkbox */
  --checkbox-bg-clr: var(--input-bg-clr);
  --checkbox-bg-clr-hover: var(--checkbox-bg-clr);
  --checkbox-bg-clr-disabled: var(--checkbox-bg-clr);
  --checkbox-bg-clr-invalid: var(--input-bg-clr-invalid);
  --checkbox-bg-clr-selected: var(--input-bg-clr);
  --checkbox-bg-clr-selected-hover: var(--checkbox-bg-clr-selected);
  --checkbox-bg-clr-selected-disabled: var(--input-border-clr-disabled);
  --checkbox-bg-clr-selected-invalid: var(--input-bg-clr-invalid);
  --checkbox-checkmark-clr: var(--btn-secondary-txt-clr);
  --checkbox-checkmark-clr-disabled: var(--input-txt-clr-disabled);
  --checkbox-checkmark-clr-invalid: var(--btn-danger-txt-clr);
  --checkbox-border-clr: var(--input-border-clr);
  --checkbox-border-clr-hover: var(--input-border-clr-hover);
  --checkbox-border-clr-disabled: var(--input-border-clr-disabled);
  --checkbox-border-clr-invalid: var(--input-border-clr-invalid);

  /* 14. RadioButton */
  --radio-bg-clr: var(--clr-transparent);
  --radio-bg-clr-hover: var(--input-bg-clr);
  --radio-bg-clr-disabled: var(--radio-bg-clr);
  --radio-bg-clr-invalid: var(--input-bg-clr-invalid);
  --radio-checkmark-clr: var(--input-txt-clr);
  --radio-checkmark-clr-disabled: var(--input-txt-clr-disabled);
  --radio-checkmark-clr-invalid: var(--input-txt-clr-invalid);
  --radio-border-clr: var(--clr-border-medium-contrast);
  --radio-border-clr-hover: var(--checkbox-border-clr-hover);
  --radio-border-clr-selected: var(--radio-border-clr);
  --radio-border-clr-disabled: var(--radio-border-clr-selected);
  --radio-border-clr-invalid: var(--input-border-clr-invalid-hover);

  /* 15. TextEditor */
  /* Rich text and markdown editor component */
  /* Buttons in the editor toolbar */
  --text-editor-button-bg-clr: var(--btn-secondary-bg-clr);
  --text-editor-button-bg-clr-hover: var(--btn-secondary-bg-clr-hover);
  --text-editor-button-txt-clr: var(--btn-secondary-txt-clr);
  --text-editor-button-txt-clr-hover: var(--btn-secondary-txt-clr-hover);

  /* Dropdown menu for text style options */
  --text-editor-menu-bg-clr: var(--menu-bg-clr);
  --text-editor-menu-bg-clr-hover: var(--menu-bg-clr-hover);
  --text-editor-menu-txt-clr: var(--menu-txt-clr);
  --text-editor-menu-txt-clr-hover: var(--menu-txt-clr-hover);
  --text-editor-border-clr: var(--input-border-clr);
  --text-editor-border-clr-hover: var(--input-border-clr-hover);
  --text-editor-txt-clr: var(--input-txt-clr);

  /* Code lines and code blocks */
  --text-editor-code-bg-clr: var(--clr-transparent-higher-contrast);

  /* 16. Tabs */
  /* Used in the APIs editor page */
  --tab-bg-clr: var(--clr-accent-low-contrast);
  --tab-bg-clr-hover: var(--tab-bg-clr);
  --tab-txt-clr: var(--clr-primary-medium-dark);
  --tab-txt-clr-hover: var(--clr-primary-medium-light);
  --tab-border: var(--clr-border-medium-contrast);
  --tab-border-hover: var(--tab-border);
  --tab-border-selected: var(--tab-txt-clr-hover);

  /* 17. Progress Bar */
  --progress-bar-container-bg-clr: var(--clr-transparent-higher-contrast);
  --progress-bar-bg-clr: var(--btn-primary-bg-clr);
  --progress-bar-txt-clr: var(--btn-primary-txt-clr);

  /* 18. Table */
  --table-border-clr: var(--clr-transparent-high-contrast);

  /* Cells in table head */
  --table-th-bg-clr: var(--btn-secondary-bg-clr);
  --table-th-bg-clr-hover: var(--table-th-bg-clr);
  --table-th-txt-clr: var(--btn-secondary-txt-clr);
  --table-th-txt-clr-hover: var(--table-th-txt-clr);

  /* Cells in table body */
  --table-td-bg-clr: var(--table-th-bg-clr);
  --table-td-bg-clr-hover: var(--clr-transparent-high-contrast);
  --table-td-txt-clr: var(--clr-txt-body);
  --table-td-txt-clr-hover: var(--table-td-txt-clr);

  /* 19. Skeleton */
  --skeleton-opacity: 0.1;
}