/* ===== MINIMAL THEME (ENHANCED) ===== */
/* Complete theme variables - serves as reference for all other themes */

:root {

  /* ===== MODAL TINT (header-v2 mobile modals) ===== */
  --modal-tint: var(--color-primary 0.6);

  /* ===== CORE THEME COLORS ===== */
  --color-primary: var(--gray-8);
  --color-secondary: var(--gray-6);
  --color-tertiary: var(--gray-3);
  --color-disabled: var(--gray-2);
  --color-highlight: #e3e3e3b2;
  --citrus-highlight: #d2d218;
  
  /* ===== BACKGROUNDS ===== */
  --bg-primary: var(--gray-0);
  --bg-secondary: var(--gray-10);
  --bg-tertiary: var(--gray-2);
  --bg-inverse: var(--gray-10);
  --bg-pop: var(--citrus-highlight);

  --bg-header:     var(--bg-primary);
  --bg-body:      var(--bg-tertiary);
  --bg-bv-filterbar: var(--bg-tertiary);

  /* ===== BORDERS ===== */
  --border-primary: var(--gray-8);
  --border-secondary: var(--gray-3);
  --border-emphasis: var(--gray-10);
  --border-muted: var(--gray-2);
  
  /* ===== STATUS COLORS ===== */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-dark: #15803d;
  
  --color-warning: #ca8a04;
  --color-warning-light: #fef9c3;
  --color-warning-dark: #a16207;
  
  --color-error: #dc2626;
  --color-error-light: #fee2e2;
  --color-error-dark: #b91c1c;
  
  --color-info: #7190d4;
  --color-info-light: #dbeafe;
  --color-info-dark: #809cff;
  
  /* RGB versions for rgba() usage */
  --color-success-rgb: 22, 163, 74;
  --color-warning-rgb: 202, 138, 4;
  --color-error-rgb: 220, 38, 38;
  --color-info-rgb: 37, 99, 235;
  --color-primary-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;
  
  /* ===== INTERACTIVE STATES ===== */
  --color-hover: var(--gray-8);
  --bg-hover: var(--gray-3);
  --color-active: var(--gray-10);
  --bg-active: var(--gray-2);
  --color-focus: var(--gray-10);
  
  /* Focus ring */
  --focus-ring-color: var(--gray-10);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  
  /* ===== LINKS ===== */
  --link-color: var(--gray-10);
  --link-hover: var(--gray-7);
  --link-visited: var(--gray-6);
  --link-active: var(--gray-10);
  
  /* ===== OVERLAYS & BACKDROPS ===== */
  --overlay-color: rgba(44, 40, 36, 0.5);
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-heavy: rgba(0, 0, 0, 0.7);
  
  /* Frosted glass */
  --glass-bg:   var(--bg-primary, 0.3);
  --glass-border: rgba(0, 0, 0, 0.3);
  --glass-blur: 12px;
  --glass-saturate: 180%;
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  
  /* ===== DECORATIONS ===== */
  /* Border radius - all 0 for minimal */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
  
  /* Shadows - none for minimal */
  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  
  /* ===== COMPONENT TOKENS ===== */
  
  /* Header */
  --header__title-main: var(--font-heading);
  --header-bg: var(--bg-primary);
  --header-border: var(--border-emphasis);
  --header-text: var(--color-primary);
  --header-height: 60px;
  
  /* Navigation */
  --nav-bg: var(--bg-primary);
  --nav-text: var(--color-primary);
  --nav-hover-bg: var(--bg-hover);
  --nav-hover-text: var(--color-hover);
  --nav-active-bg: var(--bg-active);
  --nav-active-text: var(--color-active);
  
  /* Cards */
  --card-bg: var(--bg-primary);
  --card-border: var(--border-primary);
  --card-shadow: var(--shadow-none);
  --card-radius: var(--radius-none);
  --card-hover-border: var(--border-secondary);

  /* ===== WALLHEADER / PANEL FILTER-PILLS ==== */
  --wall-header-bg: var(--glass-bg);
  --wall-header-shadow: var(--shadow-lg);
  --wall-header-pills: var(--bg-primary);

  /* Forms */
  --form-bg: var(--bg-primary);
  --form-border: var(--border-primary);
  --form-text: var(--color-primary);
  --form-placeholder: var(--color-tertiary);
  --form-focus-border: var(--border-emphasis);
  --form-focus-ring: var(--focus-ring-color);
  --form-radius: var(--radius-none);
  --form-disabled-bg: var(--bg-tertiary);
  --form-disabled-text: var(--color-primary);
  --form-readonly-bg: var(--gray-2);
  --form-readonly-text: var(--color-tertiary);
  
  /* Buttons - Primary */
  --btn-primary-bg: var(--citrus-highlight);
  --btn-primary-text: var(--color-primary);
  --btn-primary-border: var(--color-primary);
  --btn-primary-hover-bg: var(--color-hover);
  --btn-primary-hover-text: var(--bg-primary);

  /* Button - Colour Accent */
  --btn-accent1: var(--accent1);
  --btn-pill: var(--citrus-highlight);

  /* Interactive accent — card buttons, active states, CTAs */
  --color-interactive: var(--citrus-highlight);
  --color-interactive-text: #000000;
  
  /* Buttons - Secondary */
  --btn-secondary-bg: var(--bg-primary);
  --btn-secondary-text: var(--color-primary);
  --btn-secondary-border: var(--border-emphasis);
  --btn-secondary-hover-bg: var(--bg-hover);
  --btn-secondary-hover-text: var(--color-hover);
  
  /* Buttons - Danger */
  --btn-danger-bg: var(--color-error);
  --btn-danger-text: var(--gray-0);
  --btn-danger-border: var(--color-error);
  --btn-danger-hover-bg: var(--color-error-dark);
  
  /* Buttons - Success */
  --btn-success-bg: var(--color-success);
  --btn-success-text: var(--gray-0);
  --btn-success-border: var(--color-success);
  --btn-success-hover-bg: var(--color-success-dark);
  
  /* Messages/Alerts */
  --message-success-bg: var(--color-success-light);
  --message-success-border: var(--color-success);
  --message-success-text: var(--color-success-dark);
  
  --message-warning-bg: var(--color-warning-light);
  --message-warning-border: var(--color-warning);
  --message-warning-text: var(--color-warning-dark);
  
  --message-error-bg: var(--color-error-light);
  --message-error-border: var(--color-error);
  --message-error-text: var(--color-error-dark);
  
  --message-info-bg: var(--color-info-light);
  --message-info-border: var(--color-info);
  --message-info-text: var(--color-info-dark);
  
  /* Footer */
  --footer-bg: var(--bg-primary);
  --footer-text: var(--color-primary);
  --footer-border: var(--border-secondary);
  
  /* Dropdown Panels (wall-header, user-panel) */
  --panel-bg: var(--glass-bg);
  --panel-border: var(--glass-border);
  --panel-shadow: var(--glass-shadow);
  --panel-blur: var(--glass-blur);
  
  /* Tables */
  --table-header-bg: var(--bg-secondary);
  --table-border: var(--border-primary);
  --table-stripe-bg: var(--bg-secondary);
  --table-hover-bg: var(--bg-tertiary);
  
  /* Badges/Tags */
  --badge-bg: var(--color-primary);
  --badge-text: var(--gray-0);
  --badge-border: var(--color-primary);
  
  /* Dividers */
  --divider-color: var(--border-primary);
  --divider-muted: var(--border-muted);
}

/* ===== THEME-SPECIFIC GLOBAL STYLES ===== */

/* ===== LOGO AND BRAND ===== */
.header__title-main{
--header__title-main: var(--font-heading);
  border-bottom: var(--border-width-1) solid var(--header-border);
}

.page__header {
  border-bottom: var(--border-width-1) solid var(--header-border);
}

body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  background-color: var(--bg-primary);
  font-weight: var(--font-normal);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }
a:active { color: var(--link-active); }

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Paragraph text */
.text-content {
  font-family: var(--font-sans);
  line-height: var(--leading-relaxed);
}

/* Code */
code, pre, .code {
  font-family: var(--font-mono);
  background-color: var(--bg-secondary);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-1) solid var(--border-primary);
}

/* Selection */
::selection {
  background-color: var(--bg-primary);
  color: var(--color-primary);
}

/* Placeholder */
::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: var(--space-3);
  height: var(--space-3);
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border: var(--border-width-1) solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-tertiary);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-secondary) var(--bg-secondary);
}

/* Focus visible for all interactive elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}