:root {
    /* Base Color Palette - These define the actual colors */
    --color-black: #2C3234;
    --color-white: #ffffff;
    --color-light-grey: #f3f2f1;
    --color-border: #b1b4b6;
    --color-secondary-text: #505a5f;
    --color-focus: #FFDD00;
    --color-error: #d4351c;
    --color-success: #1795D4;
    --color-link: #1d70b8;
    --color-link-hover: #003078;
    --color-primary-accent: #FFFFFF;
    --color-secondary-accent: var(--color-link);
    --color-sub-nav-hover: var(--color-black);
    --color-sub-nav-active-hover: var(--color-black);
    --color-chat-input-disabled: #e7e6e5;
    --color-chat-error-bg: #fef7f7;
    --color-chat-error-text: #942514;
    --color-attachment-border: #e0e0e0;
    --color-attachment-thumbnail: #ccc;
    --color-chat-attach-flash: #fff2b2;
    --color-hero-overlay: rgba(0, 0, 0, 0.45);
    --color-info-learn-bg: #FFFACD;
    --color-info-learn-button: #FFBF47;
    --color-info-learn-button-hover: #F0B13A;
    --color-info-experiment-bg: #AFEEEE;
    --color-info-experiment-border: #207e77;
    --color-info-experiment-button: #008080;
    --color-info-experiment-button-hover: #006666;
    --color-info-demos-bg: #ADD8E6;
    --color-info-demos-border: #005ea5;
    --color-info-documentation-bg: #FFB6C1;
    --color-info-documentation-button: #a02040;
    --color-info-documentation-button-hover: #801030;
    --color-learn-page-bg: #fff9e6;
    --color-experiment-card-button: #008375;
    --color-markdown-code-bg: rgba(27, 31, 35, 0.07);
    --color-markdown-pre-bg: #282c34;
    --color-markdown-pre-tx: #abb2bf;
    --color-code-button-bg: #4c566a;
    --color-code-button-text: #d8dee9;
    --color-code-button-border: #5E6A7E;
    --color-code-button-hover-bg: #5E6A7E;
    --color-code-button-hover-text: #eceff4;
    --color-code-button-copied: #a3be8c;
    --color-code-button-disabled: #3b4252;

    /* Semantic Color Variables - These define how colors are used */
    --color-page-background: var(--color-white);
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-secondary-text);
    --color-text-inverse: var(--color-white);
    --color-text-link: var(--color-link);
    --color-text-link-hover: var(--color-link-hover);
    --color-text-error: var(--color-error);
    --color-text-success: var(--color-success);
    --color-text-focus: var(--color-black);

    --color-background-primary: var(--color-white);
    --color-background-secondary: var(--color-light-grey);
    --color-background-tertiary: var(--color-chat-input-disabled);
    --color-background-error: var(--color-chat-error-bg);
    --color-background-success: var(--color-success);
    --color-background-focus: var(--color-focus);
    --color-background-attention: var(--color-chat-attach-flash);

    --color-border-primary: var(--color-border);
    --color-border-secondary: var(--color-attachment-border);
    --color-border-error: var(--color-error);
    --color-border-success: var(--color-success);
    --color-border-focus: var(--color-focus);

    /* Component Specific Semantic Colors */
    --color-header-text: var(--color-primary-accent);
    --color-header-border: var(--color-primary-accent);

    --color-sub-navigation-background: var(--color-background-secondary);
    --color-sub-navigation-text: var(--color-white);
    --color-sub-navigation-hover-background: var(--color-sub-nav-hover);
    --color-sub-navigation-active-border: var(--color-border-success);
    --color-sub-navigation-active-hover-border: var(--color-sub-nav-active-hover);

    --color-chat-input-background: var(--color-background-secondary);
    --color-chat-input-disabled-background: var(--color-background-tertiary);
    --color-chat-user-message-background: var(--color-text-link);
    --color-chat-user-message-text: var(--color-text-inverse);
    --color-chat-assistant-message-background: var(--color-background-secondary);
    --color-chat-assistant-message-text: var(--color-text-primary);
    --color-chat-error-message-background: var(--color-background-error);
    --color-chat-error-message-text: var(--color-chat-error-text);
    --color-chat-error-message-border: var(--color-border-error);

    /* AttachmentItem Colors */
    --color-attachment-item-border: var(--color-border-secondary);
    --color-attachment-item-error-border: var(--color-border-error);
    --color-attachment-item-error-text: var(--color-text-error);
    --color-attachment-item-status-icon-error-fill: var(--color-text-error);
    --color-attachment-item-status-icon-success-fill: var(--color-text-success);
    --color-attachment-item-thumbnail-border: var(--color-attachment-thumbnail);
    --color-attachment-item-preview-toggle-text: var(--color-text-link);
    --color-attachment-item-preview-toggle-hover-text: var(--color-text-link-hover);
    --color-attachment-item-remove-button-text: var(--color-text-secondary);
    --color-attachment-item-remove-button-hover-text: var(--color-text-error);

    --color-chat-attach-button-required-background: var(--color-background-focus);
    --color-chat-attach-button-required-text: var(--color-text-focus);
    --color-chat-attach-button-flash-background: var(--color-background-attention);

    --color-hero-overlay: var(--color-hero-overlay);
    --color-hero-text: var(--color-text-inverse);

    --color-info-box-learn-background: var(--color-info-learn-bg);
    --color-info-box-learn-border: var(--color-border-focus);
    --color-info-box-learn-button-background: var(--color-info-learn-button);
    --color-info-box-learn-button-text: var(--color-text-focus);
    --color-info-box-learn-button-hover-background: var(--color-info-learn-button-hover);

    --color-info-box-experiment-background: var(--color-info-experiment-bg);
    --color-info-box-experiment-border: var(--color-info-experiment-border);
    --color-info-box-experiment-button-background: var(--color-info-experiment-button);
    --color-info-box-experiment-button-text: var(--color-text-inverse);
    --color-info-box-experiment-button-hover-background: var(--color-info-experiment-button-hover);

    --color-info-box-demos-background: var(--color-info-demos-bg);
    --color-info-box-demos-border: var(--color-info-demos-border);
    --color-info-box-demos-button-background: var(--color-text-link);
    --color-info-box-demos-button-text: var(--color-text-inverse);
    --color-info-box-demos-button-hover-background: var(--color-text-link-hover);

    --color-info-box-documentation-background: var(--color-info-documentation-bg);
    --color-info-box-documentation-border: var(--color-border-error);
    --color-info-box-documentation-button-background: var(--color-info-documentation-button);
    --color-info-box-documentation-button-text: var(--color-text-inverse);
    --color-info-box-documentation-button-hover-background: var(--color-info-documentation-button-hover);

    --color-learn-page-background: var(--color-learn-page-bg);
    --color-learn-prompt-section-border: var(--color-border-focus);
    --color-learn-prompt-display-background: var(--color-background-secondary);
    --color-learn-button-background: var(--color-text-link);

    --color-experiment-page-background: var(--color-info-box-experiment-background);
    --color-experiment-prompt-card-button-background: var(--color-experiment-card-button);

    /* Markdown & Code Blocks */
    --color-markdown-inline-code-background: var(--color-markdown-code-bg);
    --color-markdown-pre-background: var(--color-markdown-pre-bg);
    --color-markdown-pre-text: var(--color-markdown-pre-tx);
    --color-code-action-button-background: var(--color-code-button-bg);
    --color-code-action-button-text: var(--color-code-button-text);
    --color-code-action-button-border: var(--color-code-button-border);
    --color-code-action-button-hover-background: var(--color-code-button-hover-bg);
    --color-code-action-button-hover-text: var(--color-code-button-hover-text);
    --color-code-action-button-copied-icon: var(--color-code-button-copied);
    --color-code-action-button-disabled-background: var(--color-code-button-disabled);

    --font-primary: "Lexend", "sans-serif";
}

body {
    font-family: var(--font-primary) !important;
}

.sub-navigation {
    background-color: var(--color-black);
    border-bottom: 0;
    color: var(--color-white);
    font-weight: 200;
}

.sub-navigation__link {
    padding: 20px 35px;
    transition: color 0.3s ease;
    font-weight: 200;
}

.logout-link {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 200;
}

.sub-navigation__link:hover {
    color: var(--color-success);
    text-decoration: none;
    background-color: var(--color-black);
}

.sub-navigation__link--active:focus {
    box-shadow: none;
}

.sub-navigation__link:focus {
    box-shadow: none;
}

.govuk-header__logo {
    width: 100%;
}

.govuk-header {
    padding: 35px 15px 10px 15px;
    background-color: var(--color-black);
    border-bottom: 0;
}

.govuk-button {
    box-shadow: none;
    font-family: var(--font-primary) !important;
}

.govuk-body {
    font-size: 16px;
}

.govuk-button {
    font-size: 16px;
}

.govuk-textarea {
    font-size: 16px;
}

.govuk-label {
    font-size: 16px;
}

.govuk-details__summary {
    font-size: 16px;
}

.govuk-hint {
    font-size: 16px;
}

.govuk-select {
    font-size: 16px;
}

.govuk-list {
    font-size: 16px;
}

.govuk-header__link--homepage {
    font-size: 20px;
}

.govuk-template {
    overflow-y: auto;
}