/* /assets/css/palette.css */

/* Define color palette in :root for global access */
:root {
    --background-dark: #1a1a1a; /* Near-black for background */
    --text-light: #f5f5f5; /* Near-white for text */
    --grey-dark: #333333; /* Dark grey for secondary backgrounds or borders */
    --grey-mid-dark: #555555; /* Mid-dark grey for subtle elements */
    --grey-mid: #888888; /* Mid grey for neutral elements */
    --grey-mid-light: #bbbbbb; /* Mid-light grey for hover states or accents */
    --grey-light: #dddddd; /* Light grey for faint highlights */
    --highlight-red: #ff3333; /* Bright red for highlights and accents */
}

/* Apply palette to core elements */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--background-dark);
    color: var(--text-light);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Styling for redacted text */
span.redacted {
    background: var(--text-light);
    color: var(--background-dark);
    user-select: none;
}

/* Styling for disabled links */
a[disabled] {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--grey-mid);
    text-decoration: none;
}

/* Link and highlight styling */
a {
    color: var(--highlight-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--grey-light);
}

/* Example usage for other elements */
h1, h2, h3 {
    color: var(--text-light);
}

p {
    color: var(--grey-light);
}

ol li a[disabled] {
    color: var(--grey-mid-dark);
}

ol li a:not([disabled]):hover {
    color: var(--highlight-red);
}