@import '@financial-times/o3-foundation/css/internal.css';

/* Dark mode colors. */
:root {
    --sl-content-width: 82ch;
    --sl-color-accent-low: #131e4f;
    --sl-color-accent: #3447ff;
    --sl-color-accent-high: #b3c7ff;
    --sl-color-white: #ffffff;
    --sl-color-gray-1: #eceef2;
    --sl-color-gray-2: #c0c2c7;
    --sl-color-gray-3: #888b96;
    --sl-color-gray-4: #545861;
    --sl-color-gray-5: #353841;
    --sl-color-gray-6: #24272f;
    --sl-color-black: #17181c;
}

/* Light mode colors. */
[data-o3-brand="internal"],
:root[data-theme='light'] {
    --sl-color-accent-low: color-mix(in srgb, var(--o3-color-palette-teal), transparent 80%);
    --sl-color-accent: var(--o3-color-palette-teal);
    --sl-color-accent-high: var(--o3-color-palette-teal);
    --sl-color-text-accent: var(--o3-color-palette-teal);

    --sl-color-orange: var(--o3-color-palette-mandarin);
    --sl-color-orange-high: var(--o3-color-palette-mandarin);
    --sl-color-orange-low: color-mix(in srgb, var(--sl-color-orange), transparent 95%);
    --sl-color-green: var(--o3-color-palette-jade);
    --sl-color-green-high: var(--o3-color-palette-jade);
    --sl-color-green-low: color-mix(in srgb, var(--sl-color-green), transparent 95%);
    --sl-color-red-high: var(--o3-color-palette-crimson);
    --sl-color-red-low: color-mix(in srgb, var(--sl-color-red), transparent 95%);
    --sl-color-blue: #006f9b; /* graphics-dark-blue from the core brand */
    --sl-color-blue-high: #006f9b; /* graphics-dark-blue from the core brand */
    --sl-color-blue-low: color-mix(in srgb, var(--sl-color-blue), transparent 95%);
    --sl-color-purple: #593380; /* velvet from the core brand */
    --sl-color-purple-high: #593380; /* velvet from the core brand */
    --sl-color-purple-low: color-mix(in srgb, var(--sl-color-purple), transparent 95%);

    --sl-font-system: var(--o3-font-family-metric);
    --sl-text-base: var(--o3-type-body-base-font-size);
    --sl-text-sm: var(--o3-type-detail-font-size);
    --sl-text-xs: var(--o3-type-detail-font-size);
    --sl-text-h1: var(--o3-type-title-lg-font-size);
    --sl-text-h2: var(--o3-type-title-md-font-size);
    --sl-text-h3: var(--o3-type-title-sm-font-size);
    --sl-text-h4: var(--o3-type-body-lg-font-size);
    --sl-line-height: 1.5;
    --sl-line-height-headings: 1.33;
}

summary {
    font-weight: bold;
    cursor: pointer;
}

details details .large {
    font-weight: normal;
    font-size: var(--sl-text-sm);
    color: var(--sl-color-gray-2);
}

.starlight-aside a {
    text-decoration-color: currentColor;
}

.sl-badge {
    font-family: var(--sl-font-system);
    padding-bottom: var(--o3-spacing-5xs);
    border-radius: 0;
}

.sl-badge.caution {
    --sl-color-bg-badge: color-mix(in srgb, var(--sl-color-orange), black 10%);
    --sl-color-border-badge: var(--sl-color-bg-badge)
}

.starlight-aside--caution {
    --sl-color-asides-text-accent: color-mix(in srgb, var(--sl-color-orange), black 10%);
}

img {
    max-width: 100%;
}

.blog-post {
    max-width: var(--o3-typography-max-line-width);
}

.blog-post figcaption {
    font-size: var(--sl-text-xs);
}

[data-o3-theme='inverse'] .component-preview {
    background-color: var(--o3-color-use-case-page-inverse-background);
    background-image: url(/assets/images/utils/dot-inverse.svg);
}

.font-weight-showcase {
    display: grid;
    gap: var(--o3-spacing-3xs);
    grid-template-columns: [content-l] 1fr [content-r] 1fr;
}

.font-weight-showcase__item--left {
    grid-column: content-l / content-l;
}
.font-weight-showcase__item--right {
    grid-column: content-r / content-r;
}

.font-weight-showcase__description {
    display: flex;
    flex-direction: column;
    font-size: var(--sl-text-xl);
    font-weight: bold;
    justify-content: center;
}
