/* =====================================================================
   JESSOS DESIGN SYSTEM TOKENS
   Dark Theme - Based on GNOME Professional Solid Dark 40.1

   All themeable values defined here. Components reference these variables.
   ===================================================================== */

:root {
  /* =================================================================
     COLOR PALETTE - Grays
     ================================================================= */
  --gp-gray-900: #303030;
  --gp-gray-800: #353535;
  --gp-gray-700: #404040;
  --gp-gray-650: #454545;
  --gp-gray-600: #494949;
  --gp-gray-550: #505050;
  --gp-gray-500: #606060;
  --gp-gray-450: #656565;
  --gp-gray-400: #8b8b8b;
  --gp-gray-200: #bcbcbc;
  --gp-gray-100: #ececec;

  /* =================================================================
     COLOR PALETTE - Borders
     ================================================================= */
  --gp-border-dark: #202020;
  --gp-border: #323232;
  --gp-border-light: #333333;

  /* =================================================================
     COLOR PALETTE - Accent (Orange)
     ================================================================= */
  --gp-accent: #d45500;
  --gp-accent-hover: #e66510;
  --gp-accent-active: #aa4400;

  /* =================================================================
     COLOR PALETTE - Semantic
     ================================================================= */
  --gp-success: #26ab62;
  --gp-warning: #f57900;
  --gp-error: #cf6679;

  /* =================================================================
     JESSOS BRAND (Legacy compatibility)
     ================================================================= */
  --desktop-purple: #2c001e;
  --desktop-purple2: #77216f;
  --header-orange: var(--gp-accent);
  --header-orange-dark: var(--gp-accent-active);

  /* =================================================================
     SEMANTIC TOKENS - Text
     ================================================================= */
  --text-primary: var(--gp-gray-100);
  --text-secondary: var(--gp-gray-200);
  --text-muted: var(--gp-gray-400);
  --text-inverse: var(--gp-gray-900);
  --text-main: var(--gp-gray-100);
  --text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  --text-shadow-subtle: 0 1px rgba(0, 0, 0, 0.12);

  /* =================================================================
     SEMANTIC TOKENS - Backgrounds
     ================================================================= */
  --bg-window: var(--gp-gray-700);
  --bg-view: var(--gp-gray-800);
  --bg-sidebar: #313131;
  --bg-elevated: var(--gp-gray-650);
  --window-bg: var(--bg-window);
  --toolbar-bg: var(--gp-gray-650);

  /* =================================================================
     SEMANTIC TOKENS - Borders
     ================================================================= */
  --border-default: var(--gp-border);
  --border-light: var(--gp-border-light);
  --border-dark: var(--gp-border-dark);

  /* =================================================================
     SEMANTIC TOKENS - Interactive States
     ================================================================= */
  --hover-overlay: rgba(236, 236, 236, 0.05);
  --active-overlay: rgba(236, 236, 236, 0.08);
  --selected-bg: var(--gp-accent);
  --selected-text: var(--gp-gray-100);
  --selection-bg: var(--gp-accent);
  --selection-text: #ffffff;

  /* =================================================================
     SEMANTIC TOKENS - Focus
     ================================================================= */
  --focus-ring: rgba(212, 85, 0, 0.5);
  --focus-ring-width: 2px;

  /* =================================================================
     SHADOWS
     ================================================================= */
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --window-shadow: 0 0 14px 5px rgba(0, 0, 0, 0.15), 0 0 5px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);

  /* =================================================================
     TRANSITIONS
     ================================================================= */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;

  /* =================================================================
     COMPONENT TOKENS - Header Bar
     ================================================================= */
  --headerbar-bg: linear-gradient(to bottom, #6a6a6a, #656565 40%, #606060);
  --headerbar-border-bottom: 1px solid #505050;
  --headerbar-text: var(--gp-gray-100);

  /* =================================================================
     COMPONENT TOKENS - Buttons
     ================================================================= */
  --btn-bg: linear-gradient(to bottom, #5a5a5a, #505050);
  --btn-bg-hover: linear-gradient(to bottom, #666666, #5c5c5c);
  --btn-bg-active: linear-gradient(to bottom, #484848, #4e4e4e);
  --btn-border: var(--gp-border);
  --btn-text: var(--text-primary);
  --btn-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  --btn-shadow-active: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --btn-suggested-bg: linear-gradient(to bottom, #e66510, #d45500);
  --btn-suggested-hover: linear-gradient(to bottom, #f07520, #e66510);
  --btn-suggested-active: linear-gradient(to bottom, #aa4400, #993d00);

  /* =================================================================
     COMPONENT TOKENS - Inputs
     ================================================================= */
  --input-bg: #565656;
  --input-border: var(--gp-border);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-muted);
  --input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --input-focus-border: var(--gp-accent);

  /* =================================================================
     COMPONENT TOKENS - Popovers & Menus
     ================================================================= */
  --popover-bg: #484848;
  --popover-border: rgba(255, 255, 255, 0.08);
  --popover-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.15);
  --menu-bg: var(--bg-elevated);
  --menu-border: var(--gp-border);
  --menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --menu-item-hover: var(--gp-accent);
  --menu-separator: var(--gp-border-light);
  --menu-text: var(--text-primary);
  --menu-text-disabled: var(--text-muted);
  --menu-hover-bg: var(--gp-accent);
  --menu-hover-text: #ffffff;

  /* =================================================================
     COMPONENT TOKENS - Lists & Rows
     ================================================================= */
  --list-hover: rgba(255, 255, 255, 0.08);
  --list-active: rgba(255, 255, 255, 0.12);
  --row-bg: transparent;
  --row-bg-hover: var(--hover-overlay);
  --row-bg-active: var(--active-overlay);
  --row-bg-selected: var(--gp-accent);
  --row-text-selected: var(--gp-gray-100);
  --row-border: var(--gp-border);
  --row-bg-odd: transparent;
  --row-bg-even: rgba(255, 255, 255, 0.02);

  /* =================================================================
     COMPONENT TOKENS - Scrollbars
     ================================================================= */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  --scrollbar-width: 8px;

  /* =================================================================
     COMPONENT TOKENS - Tooltips
     ================================================================= */
  --tooltip-bg: var(--gp-gray-900);
  --tooltip-text: var(--text-primary);
  --tooltip-border: var(--gp-border);

  /* =================================================================
     FILES APP TOKENS
     ================================================================= */
  --files-toolbar-bg: var(--toolbar-bg);
  --files-toolbar-border: var(--border-default);
  --files-view-bg: var(--bg-view);
  --files-header-bg: var(--gp-gray-650);
  --files-header-border: var(--gp-border);
  --files-row-hover: var(--row-bg-hover);
  --files-row-selected: var(--row-bg-selected);
  --files-row-selected-text: var(--row-text-selected);
  --files-status-bg: var(--gp-gray-650);
  --files-status-border: var(--gp-border);
  --files-icon-folder: #d49a6a;
  --files-breadcrumb-bg: var(--gp-gray-600);
  --files-breadcrumb-hover: var(--gp-gray-550);

  /* =================================================================
     SIDEBAR TOKENS (Nautilus-style)
     ================================================================= */
  --sidebar-bg: #303030;
  --sidebar-border: var(--gp-border);
  --sidebar-text: var(--text-primary);
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-selected: var(--gp-accent);
  --sidebar-heading: var(--text-muted);

  /* =================================================================
     ACCENT COLORS (Legacy compatibility for apps)
     ================================================================= */
  --accent-blue: #3584e4;
  --accent-green: var(--gp-success);
  --accent-orange: var(--gp-accent);
  --accent-red: var(--gp-error);
  --accent-purple: #9141ac;
  --accent-yellow: #f5c211;

  /* =================================================================
     GNOME TOKENS (Legacy compatibility)
     ================================================================= */
  --gnome-bg: var(--gp-gray-650);
  --gnome-bg-dark: var(--gp-gray-700);
  --gnome-fg: var(--text-primary);
  --gnome-fg-muted: var(--text-muted);
  --gnome-border: var(--border-default);
  --gnome-border-light: var(--border-light);

  /* =================================================================
     CUSTOM CURSOR
     ================================================================= */
  --cursor-default: url('/img/jessos-cursor.png'), auto;
  --cursor-pointer: url('/img/jessos-cursor.png'), auto;
}