/* CSS Custom Properties for Logoth Red Theme */
:root {
    /* Colors */
    --color-primary-red: #a43337;
    --color-dark-red: #a43337;
    --color-red-border: #c54549;
    --color-red-light: #dd9295;
    --color-green-hover: #58cb8e;
    --color-dark: #282828;
    --color-dark-alt: #353535;
    --color-light-bg: #f0f0f0;
    --color-white: #ffffff;
    --color-gray-text: #737373;
    --color-gray-light: #8c8c8c;
    --color-gray-lighter: #a0a0a0;
    --color-input-border: #d4d8dd;
    --color-shadow: rgba(0, 0, 0, 0.10);
    --color-shadow-strong: rgba(0, 0, 0, 0.20);

    /* Fonts */
    --font-family: 'Helvetica neue', Lucida Grande, Helvetica, sans-serif;
    --font-size-base: 14px;
    --font-size-small: 11px;
    --font-size-medium: 12px;
    --font-size-large: 18px;

    /* Layout */
    --header-height: 54px;
    --billboard-height: 340px;
    --page-header-height: 100px;

    /* Spacing */
    --content-padding: 6px 14px;
    --content-margin-bottom: 16px;
    --border-radius-content: 18px;
    --border-radius-hero-button: 40px;
    --border-radius-submit-button: 34px;
    --border-radius-dropdown: 7px;

    /* Typography */
    --line-height-base: 20px;
    --line-height-input: 28px;
    --letter-spacing-heading: -1px;

    /* Z-Index Layers */
    --z-index-header: 1000;
    --z-index-dropdown: 300;

    /* Animation */
    --animation-duration: 150ms;

    /* Fixed Header */
    --header-opacity: 0.97;

    /* Aliases for custom.css compatibility */
    --primary-red: var(--color-primary-red);
    --primary-dark: var(--color-dark);
    --accent-red: var(--color-red-border);
    --border-red: var(--color-red-border);
    --accent-green: var(--color-green-hover);
    --light-bg: var(--color-light-bg);
    --text-medium: var(--color-dark);
    --text-light: var(--color-gray-text);
    --text-lighter: var(--color-gray-lighter);
    --border-color: var(--color-gray-lighter);
}