/*

Text Manipulation Interface (TMI)
Copyright: Software Development Solutions LLC

Help: ?help or &help

______________________________________________________________________________________
TMI Execution Details:
 - Included file: roots/Vanguard_Aesthetics/Midnight_Serenity.css
 - Included file: roots/Vanguard_Aesthetics/vanguard-core.css

______________________________________________________________________________________

*/



/* (include)=> roots/Vanguard_Aesthetics/Midnight_Serenity.css */
:root {
    /* === Core Colors (Updated for Blue Theme) === */

    /* Backgrounds */
    --background-color: #0d1b2a;
    --background-light: #1b263b;
    --background-dark: #0a192f;
    --surface-color: #112d4e;

    /* Text Colors */
    --text-color: #e0f7fa;
    --text-light: #ffffff;
    --text-dark: #a6c9d8;
    --text-muted: #789bb4;
    --text-accent: #64b5f6;

    /* Borders */
    --border-color: #1e3a5f;
    --border-light: #3f5c78;
    --border-dark: #1b314a;

    /* === Form Elements === */
    --input-background: #1b314a;
    --input-text-color: #e0f7fa;
    --input-placeholder-color: #789bb4;
    --input-border-color: #2a4f6e;
    --input-focus-border: #29b6f6;
    --input-padding: 10px;
    --input-border-radius: 5px;

    /* === Buttons === */
    --button-background: #1e88e5;
    --button-hover-background: #2196f3;
    --button-border-radius: 6px;
    --button-padding: 12px 18px;
    --button-text-color: #ffffff;

    /* Bootstrap-style Buttons */
    --button-primary: #1976d2;
    --button-primary-hover: #1e88e5;
    --button-secondary: #1565c0;
    --button-secondary-hover: #1b74d1;
    --button-success: #43a047;
    --button-success-hover: #66bb6a;
    --button-danger: #e53935;
    --button-danger-hover: #ef5350;
    --button-warning: #fbc02d;
    --button-warning-hover: #ffe082;
    --button-info: #29b6f6;
    --button-info-hover: #4fc3f7;
    --button-light: #789bb4;
    --button-light-hover: #a6c9d8;
    --button-dark: #0a192f;
    --button-dark-hover: #0d1b2a;
    --button-link: #4fc3f7;
    --button-link-hover: #81d4fa;

    /* === Typography === */
    --font-family: Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;

    /* === Sizing & Spacing === */
    --element-margin: 10px;
    --element-padding: 12px;
    --container-width: 1200px;
    --card-padding: 20px;
    --border-width: 2px;

    /* === UI Enhancements === */
    --highlight-color: #90caf9;
    --textarea-background: #1b314a;
    --form-background: #112d4e;
    --shadow-color: rgba(0, 0, 0, 0.2);
}

  
  
  
  
  
  /* (include)=> roots/Vanguard_Aesthetics/vanguard-core.css */
  
  /* General Styling */
  body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: var(--font-family);
      margin: 0;
      padding: 20px;
  }
  
  /* Container */
  .container {
      max-width: var(--container-width);
      margin: auto;
      background: var(--surface-color);
      padding: var(--card-padding);
      border-radius: 10px;
      box-shadow: 0px 4px 10px var(--shadow-color);
  }
  
  /* Typography */
  h1, h2, h3 {
      color: var(--text-light);
  }
  
  p {
      color: var(--text-muted);
      font-size: var(--font-size-md);
  }
  
  .text-muted {
      color: var(--text-muted);
  }
  
  .font-xs { font-size: var(--font-size-xs); }
  .font-sm { font-size: var(--font-size-sm); }
  .font-md { font-size: var(--font-size-md); }
  .font-lg { font-size: var(--font-size-lg); }
  .font-xl { font-size: var(--font-size-xl); }
  .font-xxl { font-size: var(--font-size-xxl); }
  
  /* Buttons */
  .button {
      display: inline-block;
      padding: var(--button-padding);
      border-radius: var(--button-border-radius);
      color: var(--button-text-color);
      text-decoration: none;
      margin-right: var(--element-margin);
      font-size: var(--font-size-md);
      transition: background 0.3s, color 0.3s;
  }
  
  .button-primary { background: var(--button-primary); }
  .button-primary:hover { background: var(--button-primary-hover); }
  
  .button-secondary { background: var(--button-secondary); }
  .button-secondary:hover { background: var(--button-secondary-hover); }
  
  .button-success { background: var(--button-success); }
  .button-success:hover { background: var(--button-success-hover); }
  
  .button-danger { background: var(--button-danger); }
  .button-danger:hover { background: var(--button-danger-hover); }
  
  .button-warning { background: var(--button-warning); }
  .button-warning:hover { background: var(--button-warning-hover); }
  
  .button-info { background: var(--button-info); }
  .button-info:hover { background: var(--button-info-hover); }
  
  .button-light { background: var(--button-light); color: var(--text-dark); }
  .button-light:hover { background: var(--button-light-hover); }
  
  .button-dark { background: var(--button-dark); }
  .button-dark:hover { background: var(--button-dark-hover); }
  
  .button-link { background: transparent; color: var(--button-link); }
  .button-link:hover { color: var(--button-link-hover); }
  
  /* Form Elements */
  .form-group {
      margin-bottom: var(--element-margin);
  }
  
  label {
      display: block;
      color: var(--text-light);
      font-size: var(--font-size-md);
      margin-bottom: 5px;
  }
  
  input, textarea {
      width: 100%;
      padding: var(--input-padding);
      background: var(--input-background);
      color: var(--input-text-color);
      border: var(--border-width) solid var(--input-border-color);
      border-radius: var(--input-border-radius);
      font-size: var(--font-size-md);
      outline: none;
      transition: border-color 0.3s;
  }
  
  input::placeholder, textarea::placeholder {
      color: var(--input-placeholder-color);
  }
  
  input:focus, textarea:focus {
      border-color: var(--input-focus-border);
  }
  
  /* Cards */
  .card {
      background: var(--background-light);
      padding: var(--card-padding);
      border-radius: 8px;
      box-shadow: 0px 4px 8px var(--shadow-color);
      margin-top: var(--element-margin);
  }
  
  .card h3 {
      margin-top: 0;
      color: var(--text-light);
  }
  
  .card p {
      margin-bottom: var(--element-margin);
  }
  
  /* Footer */
  footer {
      margin-top: 30px;
      text-align: center;
      color: var(--text-muted);
      font-size: var(--font-size-sm);
  }