/**
 * CSS Variables for the entire application
 * These variables can be accessed within Shadow DOM via inheritance
 */

:root {
  /* Color System */
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Text colors */
  --color-text: #28282B;
  --color-text-light: #495057;
  --color-text-white: #FAF9F6;

  /* Background colors */
  --color-bg-primary: white;
  --color-bg-secondary: #e9ecef;
  --color-bg-dark: #28282B;
  --color-navy-dark: #001f3f;
  --color-navy-medium: #003366;
  --color-navy-light: #0A4882;

  /* Border colors */
  --color-border: #ced4da;
  --color-border-focus: #80bdff;

  /* Scrollbar colors */
  --color-scrollbar-track: rgb(64, 64, 64);
  --color-scrollbar-thumb: #28282B;
  --color-scrollbar-thumb-hover: rgb(112, 112, 112);
  --color-scrollbar-thumb-active: rgb(128, 128, 128);

  /* Typography */
  --font-primary: sans-serif;
  --font-accent: copperplate, serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5rem;
  --line-height-base: 1.5;
  --font-weight-normal: 400;
  --font-weight-bold: 600;

  /* Spacing */
  --spacing-xs: 0.375rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 3rem;

  /* Layout */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.5rem;
  --border-radius-lg: 1em;

  /* Shadows */
  --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  --shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 1s ease-out;

  /* Component-specific */
  --form-width: 380px;
  --min-form-width: 250px;
  --input-padding: var(--spacing-xs) var(--spacing-md);
  --input-margin: var(--spacing-xs) var(--spacing-md);
  --nav-height: 60px;

  /* nav-template — pin to the original lib defaults so this app's look
   * stays stable even if the lib's fallbacks shift. */
  --nav-bg: black;
  --nav-shadow: 0px 0px 5px #1f1f1f;
  --nav-shadow-mobile: 0px 0px 5px #333333;
  --nav-z: 99;
  --nav-padding: 1em;
  --nav-logo-width: 6em;
  --nav-social-width: 5.4em;
  --nav-links-margin: -4em 0 0 0;
  --nav-min-height: auto;

  /* nav-link — pin to original defaults */
  --nav-link-padding: 0.5rem 1rem;
  --nav-link-color: #FAF9F6;
  --nav-link-color-active: rgb(128, 128, 128);
  --nav-link-decoration-active: none;

  /* container-template — pin to original defaults */
  --container-max-sm: 720px;
  --container-max-md: 960px;
  --container-max-lg: 1140px;
  --container-padding: 0;

  /* input-template — pin to original hardcoded defaults */
  --input-color: #495057;
  --input-bg: #fff;
  --input-shadow: none;
  --input-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

  /* button-template — pin to original hardcoded defaults */
  --btn-shadow: none;
  --btn-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  --btn-shadow-active: inset 2px 2px 3px var(--color-border);

  /* Responsive breakpoints */
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

/*
  --mobile-form-width: 90vw;
  --mobile-font-size-base: 1.1rem;
  --mobile-font-size-lg: 1.3rem;
  --mobile-font-size-xl: 1.6rem;
  --mobile-input-height: 44px;
  --mobile-button-height: 48px;
  --mobile-spacing-lg: 1.25rem;
*/
}

/* Dark theme variables (can be toggled with a class) */
.dark-theme {
  --color-text: #E0E0E0;
  --color-text-light: #B8B8B8;
  --color-bg-primary: #222222;
  --color-bg-secondary: #333333;
  --color-border: #444444;
  --color-scrollbar-track: #222222;
  --color-scrollbar-thumb: #666666;
  --color-scrollbar-thumb-hover: #888888;
  --color-scrollbar-thumb-active: #999999;
}