@use '../variables.scss' as *;

// Theme variables
:root {
  // Base colours
  --theme-accent-primary: #{$dim-brand}; // Interaction styles (hover, active, focus)
  --theme-accent-secondary: #68a0b7; // Secondary interactions

  // Generic fills for modal backgrounds (see below)
  --theme-fill-modal: #000; // Base fill for popups, drawers, dropdowns etc
  --theme-fill-modal-actions: #161616; // Layered/contextual modals (search, item actions)

  // Text
  --theme-text: #fff;
  --theme-text-invert: #000;
  --theme-text-secondary: #aaa;

  // Buttons
  --theme-button-bg: rgb(255, 255, 255, 0.2);
  --theme-button-text: white;
  --theme-button-bg-primary: rgb(255, 255, 255, 0.3);

  // Input field (text boxes and text areas)
  --theme-input-bg: #333;

  // Shadows
  --theme-drop-shadow: 0 0 18px 0 #000;

  // Tooltips
  --theme-tooltip-underline: transparent;
  --theme-tooltip-header-bg: #0a0a0f;
  --theme-tooltip-body-bg: #151523;
  --theme-tooltip-border: #8e8e9e;
  --theme-tooltip-minimal-bg: #5d5970;

  // App background gradient pattern
  --theme-app-bg-gradient-start: hsl(240, 20%, 28%);
  --theme-app-bg-gradient-end: hsl(240, 27%, 12%);
  --theme-app-bg-gradient: radial-gradient(
    circle at 50% 70px,
    var(--theme-app-bg-gradient-start) 0%,
    var(--theme-app-bg-gradient-end) 100%
  );

  // App
  --theme-app-bg: var(--theme-app-bg-gradient);
  // Background color for (currently only) Settings page sections. Distinguishes them from theme-app-bg.
  --theme-section-bg: var(--theme-search-bg);
  // The color of PWA elements like the title bar. This cannot be a gradient.
  --theme-pwa-background: #202034;
  --theme-mobile-background: #000;

  // Header
  --theme-header-nav-bg: var(--theme-app-bg-gradient);
  --theme-header-nav-slideout-menu-bg: var(--theme-fill-modal);
  --theme-header-characters-bg: var(--theme-app-bg-gradient);
  --theme-header-characters-txt: rgb(255, 255, 255, 0.8);

  // Dropdown menu
  --theme-dropdown-menu-bg: var(--theme-fill-modal);

  // Search
  // Background color for the search bar. Distinguishes it from theme-header-nav-bg.
  --theme-search-bg: rgb(0, 0, 0, 0.4);
  --theme-search-dropdown-bg: var(--theme-fill-modal-actions);
  --theme-search-dropdown-border: transparent;

  // Items
  --theme-item-polaroid: #ddd;
  --theme-item-polaroid-txt: var(--theme-text-invert);
  --theme-item-polaroid-hover-border: #ddd;
  --theme-item-polaroid-masterwork: #eade8b;
  --theme-item-polaroid-masterwork-txt: var(--theme-text-invert);
  --theme-item-polaroid-capped: #f5dc56;
  --theme-item-polaroid-capped-txt: #f2721b;
  --theme-item-polaroid-godroll: #0b486b;
  --theme-item-polaroid-trashroll: #d14334;
  --theme-item-polaroid-element-adjust-brightness: 70%; // Adjust for legibility of Arc, Strand, Void icons
  --theme-item-socket-border: #888; // Socketable slots (mods, fashion, sub-class/abilities)
  --theme-item-shaped-icon: #{$shaped};

  // Item popup
  --theme-item-popup-border: #222;
  --theme-item-popup-arrow: var(--theme-fill-modal-actions);
  --theme-item-popup-actions-bg: var(--theme-fill-modal-actions);
  --theme-item-popup-panel-bg: #333; // Panels for progress (masterwork, crafted, catalyst) and archetype
  --theme-item-popup-progress-bar-bg: #222;

  // Item feed
  --theme-item-feed-bg: var(--theme-fill-modal);

  // Item sheet (compare, armory)
  --theme-item-sheet-bg: var(--theme-fill-modal);
  --theme-sheet-search-bg: rgb(255, 255, 255, 0.15);

  // Organizer
  --theme-organizer-row-odd-bg: #27263a;
  --theme-organizer-row-even-bg: #1d1c2b;

  // Records
  --theme-record-redeemed: #c4b578;
}
