/* Merdian Theme for OTR Components 
& Menu and Footer Style */

[data-theme="meridian"] {
  /* Colors */
  --otr-color-primary: #212529; /* TEXT COLOR - Main interactive Merdian Self Storage red*/
  --otr-color-primary-hover: #c50000;
  --otr-color-primary-active: #a00000;
  --otr-color-primary-text: #ffffff;
  
  --otr-color-secondary: #6c757d; /* Grey for secondary elements */
  --otr-color-secondary-hover: #545b62;
  --otr-color-secondary-active: #444a50;
  --otr-color-secondary-text: #ffffff;

  --otr-color-accent: #fb0023; /* BUTTON COLOR Prominent red accent */
  --otr-color-accent-hover: #d10623; /* BUTTON COLOR HOVER Prominent red accent */
  --otr-color-accent-active: #a00000;
  --otr-color-accent-text: #ffffff;

  --otr-color-background-primary: #ffffff;
  --otr-color-background-secondary: #f8f9fa; /* Light grey */
  --otr-color-background-tertiary: #e9ecef;  /* Slightly darker light grey */
  --otr-color-background-disabled: #e9ecef;
  --otr-color-background-overlay: rgba(0, 0, 0, 0.5);

  --otr-color-text-primary: #212529; /* Dark grey/black */
  --otr-color-text-secondary: #6c757d; /* Medium grey */
  --otr-color-text-disabled: #adb5bd; /* Light grey for disabled text */
  --otr-color-text-link: var(--otr-color-primary); /* Red links */
  --otr-color-text-link-hover: var(--otr-color-primary-hover);
  --otr-color-text-error: #dc3545; /* Standard error red */
  --otr-color-text-success: #28a745; /* Standard success green */
  --otr-color-text-warning: #ffc107; /* Standard warning yellow */
  --otr-color-text-info: #17a2b8; /* Standard info blue */

  --otr-color-border-primary: #e0e0e0; /* Light neutral grey */
  --otr-color-border-secondary: #eeeeee; /* Lighter neutral grey */
  --otr-color-border-focus: var(--otr-color-primary); /* Red focus outline */
  --otr-color-border-error: #dc3545; /* Standard error red for borders */

  --otr-color-error: #dc3545;
  --otr-color-success: #28a745;
  --otr-color-warning: #ffc107;
  --otr-color-info: #17a2b8;
  
  /* Inverted Variables for Parma Theme (Dark Appearance) */
  --otr-color-inverted-background-primary: #212529; /* Dark background */
  --otr-color-inverted-text-primary: #f8f9fa; /* Light text */
  --otr-color-inverted-background-secondary: #343a40;
  --otr-color-inverted-background-tertiary: #495057;
  --otr-color-inverted-border-primary: #495057; /* Darker grey border */
  --otr-color-inverted-border-secondary: #5a6268; 
  --otr-color-inverted-text-secondary: #adb5bd;
  /* Inverted red for primary/accent on dark - could be less saturated or a bit lighter */
  --otr-color-inverted-primary: #f25f5c; /* Example: a lighter, slightly desaturated red */
  --otr-color-inverted-accent: var(--otr-color-inverted-primary);
  --otr-color-inverted-success: #5cb85c; /* Lighter green for dark bg */
  --otr-color-inverted-error: #d9534f; /* Lighter red for dark bg */
  --otr-color-inverted-placeholder-background: #343a40;
  --otr-color-inverted-placeholder-shimmer-base: #343a40;
  --otr-color-inverted-placeholder-shimmer-highlight: #495057;

  /* Placeholder Colors */
  --otr-color-placeholder-background: #e9ecef;
  --otr-color-placeholder-shimmer-base: #e9ecef;
  --otr-color-placeholder-shimmer-highlight: #f8f9fa;

  /* Typography */
  --otr-font-family-base: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --otr-font-family-heading: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --otr-font-size-xs: 0.75rem;
  --otr-font-size-sm: 0.875rem;
  --otr-font-size-md: 1rem;
  --otr-font-size-lg: 1.25rem;
  --otr-font-size-xl: 1.5rem;
  --otr-font-size-xxl: 2rem;
  --otr-font-size-xxxl: 2.5rem;
  --otr-font-size-huge: 3rem;
  --otr-font-size-huge-xl: 3.5rem;
  --otr-font-size-huge-xxl: 4rem;
  --otr-font-size-huge-xxxl: 4.5rem;
  --otr-font-weight-light: 300;
  --otr-font-weight-normal: 400;
  --otr-font-weight-semibold: 600;
  --otr-font-weight-bold: 700;
  --otr-line-height-base: 1.5;
  --otr-line-height-heading: 1.2;
  --otr-text-transform-base: none;

  /* Spacing */
  --otr-space-unit: 5px; /* Increased from 4px */
  --otr-space-xs: calc(var(--otr-space-unit) * 1);   /* 5px */
  --otr-space-sm: calc(var(--otr-space-unit) * 2);   /* 10px */
  --otr-space-md: calc(var(--otr-space-unit) * 4);   /* 20px */
  --otr-space-lg: calc(var(--otr-space-unit) * 6);   /* 30px */
  --otr-space-xl: calc(var(--otr-space-unit) * 8);   /* 40px */

  /* Sizing */
  --otr-size-button-min-width: 64px;
  --otr-size-input-min-height: 38px;

  /* Borders */
  --otr-border-radius-sm: 6px;  /* Doubled from 0.25rem */
  --otr-border-radius-md: 10px;   /* Doubled from 0.5rem */
  --otr-border-radius-lg: 14px;    /* Doubled from 1rem */
  --otr-border-width-sm: 1px;
  --otr-border-width-md: 2px;
  --otr-button-border-width: var(--otr-border-width-sm);
  --otr-button-border-style: solid;

  /* Shadows */
  --otr-shadow-xs: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --otr-shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --otr-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --otr-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* Transitions */
  --otr-transition-duration: 0.15s;
  --otr-transition-timing-function: ease-in-out;

  /* Z-Index */
  --otr-z-index-dropdown: 1000;
  --otr-z-index-sticky: 1020;
  --otr-z-index-modal-backdrop: 1040;
  --otr-z-index-modal: 1050;
  --otr-z-index-popover: 1060;
  --otr-z-index-tooltip: 1070;

  /* Text Effects */
  --otr-text-shadow-primary: none;
  --otr-text-shadow-text-on-primary: none;
  --otr-drop-shadow-primary: none;

  /* Button Effects & Overrides from theme-contract.json */
  --otr-button-shadow: none; /* Default button shadow */
  --otr-button-background: var(--otr-color-accent); /* Red */
  --otr-button-text-color: var(--otr-color-accent-text); /* White */
  --otr-button-border-color: transparent; /* Modern flat look */
  --otr-button-background-hover: var(--otr-color-accent-hover);
  --otr-button-text-color-hover: var(--otr-color-accent-text);
  --otr-button-border-color-hover: transparent;
  --otr-button-background-active: var(--otr-color-accent-active);
  --otr-button-border-color-active: transparent;
  /* Component specific overrides if needed, e.g. padding, border-radius for buttons */
  /* These are from theme-contract, keep them if default button structure should differ from component defaults */
  --otr-button-padding-vertical-override: var(--otr-space-sm); /* e.g., 10px */
  --otr-button-padding-horizontal-override: var(--otr-space-md); /* e.g., 20px */
  --otr-button-border-radius-override: var(--otr-border-radius-md); /* e.g., 1rem */
  --otr-button-font-size-override: var(--otr-font-size-md);
  --otr-button-font-weight-override: var(--otr-font-weight-bold);
  --otr-button-text-transform-override: none;
	
	
}

/* Style Variants for parma Theme */
/* Components use these variables when data-otr-variant is set */

[data-theme="meridian"] :host([data-otr-variant="primary"]) {
  --otr-color-background-primary: var(--otr-color-primary); /* Red */
  --otr-color-text-primary: var(--otr-color-primary-text); /* White */
  --otr-color-border-primary: var(--otr-color-primary-active); /* Darker Red */
}

[data-theme="meridian"] :host([data-otr-variant="secondary"]) {
  --otr-color-background-primary: var(--otr-color-secondary); /* Grey */
  --otr-color-text-primary: var(--otr-color-secondary-text); /* White */
  --otr-color-border-primary: var(--otr-color-secondary-active); /* Darker Grey */
}

[data-theme="meridian"] :host([data-otr-variant="accent"]) {
  --otr-color-background-primary: var(--otr-color-accent); /* Red */
  --otr-color-text-primary: var(--otr-color-accent-text); /* White */
  --otr-color-border-primary: var(--otr-color-accent-active); /* Darker Red */
}

[data-theme="meridian"] :host([data-otr-variant="error"]) {
  --otr-color-background-primary: var(--otr-color-error);
  --otr-color-text-primary: #ffffff;
  --otr-color-border-primary: #bd2130; 
}

[data-theme="meridian"] :host([data-otr-variant="success"]) {
  --otr-color-background-primary: var(--otr-color-success);
  --otr-color-text-primary: #ffffff;
  --otr-color-border-primary: #1e7e34;
}

[data-theme="meridian"] :host([data-otr-variant="warning"]) {
  --otr-color-background-primary: var(--otr-color-warning);
  --otr-color-text-primary: #212529; /* Dark text for yellow bg */
  --otr-color-border-primary: #d39e00;
}

[data-theme="meridian"] :host([data-otr-variant="info"]) {
  --otr-color-background-primary: var(--otr-color-info);
  --otr-color-text-primary: #ffffff;
  --otr-color-border-primary: #0c5460;
}

[data-theme="meridian"] :host([data-otr-variant="neutral"]) {
  --otr-color-background-primary: var(--otr-color-background-secondary); /* Light grey */
  --otr-color-text-primary: var(--otr-color-text-primary); /* Dark text */
  --otr-color-border-primary: var(--otr-color-border-secondary); /* Lighter grey border */
}

[data-theme="meridian"] :host([data-otr-variant="light-emphasis"]) {
  --otr-color-background-primary: var(--otr-color-background-tertiary); /* Slightly darker grey */
  --otr-color-text-primary: var(--otr-color-text-primary);
  --otr-color-border-primary: var(--otr-color-border-primary); /* Grey border */
}

[data-theme="meridian"] :host([data-otr-variant="dark-emphasis"]) {
  /* For parma (light) theme, dark-emphasis could be a medium-dark grey */
  --otr-color-background-primary: #495057; 
  --otr-color-text-primary: #ffffff;
  --otr-color-border-primary: #343a40;
}

[data-theme="meridian"] :host([data-otr-variant="muted"]) {
  /* Specific overrides for button structure for this variant */
  --otr-button-padding-horizontal-override: var(--otr-space-lg);
  --otr-button-padding-vertical-override: var(--otr-space-sm); /* Adjusted from light-theme's 10px to use space unit */
  --otr-button-border-radius-override: var(--otr-border-radius-md);
  /* Colors for 'muted' are typically handled by component's CSS using global semantic variables like text-secondary and border-primary */
}