/**
 * LOGB.dk appearance – hex only here.
 * Tokens name the colour. Usage variables name the role. Why: ADR-003.
 * Pairings: documentation/design-manual-review.md.
 * Brand hex: Visual Identity Manual (documentation/er.pdf).
 */

:root {
    /* ========================================
       TOKENS – what the colour is
       ======================================== */

    --color-logb-king-blue: #335fa3;
    --color-logb-cerulean-blue: #248fd6;
    --color-logb-gray: #808083;
    --color-logb-khaki: #e5e5e4;
    --color-logb-black: #000000;
    --color-logb-white: #ffffff;
    --color-logb-black-10: color-mix(in srgb, var(--color-logb-black) 10%, transparent);
    --color-logb-black-30: color-mix(in srgb, var(--color-logb-black) 30%, transparent);

    /* Form feedback – not in the brand manual; functional only */
    --color-feedback-success-text: #1b5e20;
    --color-feedback-success-background: #e8f5e9;
    --color-feedback-success-border: #a5d6a7;
    --color-feedback-error-text: #8c1c13;
    --color-feedback-error-background: #fdecea;
    --color-feedback-error-border: #f5c6c2;

    /* ========================================
       USAGE – what it is for (default: body)
       Cerulean does not carry body text.
       Khaki is a border, never a section fill.
       ======================================== */

    --body-background-color: var(--color-logb-white);
    --body-text-color: var(--color-logb-gray);
    --body-heading-color: var(--color-logb-gray);
    --body-link-color: var(--color-logb-king-blue);
    --body-link-hover-color: var(--color-logb-king-blue);

    --banner-background-color: var(--color-logb-king-blue);
    --banner-text-color: var(--color-logb-white);
    --banner-link-color: var(--color-logb-white);
    --banner-link-hover-color: color-mix(in srgb, var(--color-logb-white) 80%, transparent);
    --banner-heading-color: var(--color-logb-white);

    --banner-button-background-color: var(--color-logb-white);
    --banner-button-hover-background-color: var(--color-logb-khaki);
    --banner-button-color: var(--color-logb-king-blue);
    --banner-button-hover-color: var(--color-logb-king-blue);
    --banner-button-border-color: var(--color-logb-king-blue);
    --banner-button-hover-border-color: var(--color-logb-gray);

    --banner-tag-background-color: color-mix(in srgb, var(--color-logb-white) 0%, transparent);
    --banner-tag-color: var(--color-logb-white);
    --banner-tag-border-color: var(--color-logb-white);
    --banner-tag-hover-background-color: var(--color-logb-white);
    --banner-tag-hover-color: var(--color-logb-king-blue);

    --play-disc-background-color: var(--color-logb-white);
    --play-disc-chevron-color: var(--color-logb-black);

    --footer-background-color: var(--color-logb-gray);
    --footer-text-color: var(--color-logb-white);
    --footer-link-color: var(--color-logb-white);
    --footer-muted-color: var(--color-logb-gray);

    --nav-text-color: var(--color-logb-gray);
    --search-icon-color: var(--color-logb-king-blue);
    --video-background-color: var(--color-logb-black);
    --nav-hover-color: var(--color-logb-king-blue);

    --border-color: var(--color-logb-khaki);
    --border-strong-color: var(--color-logb-gray);
    --muted-background-color: var(--color-logb-khaki);
    --hover-background-color: var(--color-logb-khaki);
    --overlay-color: var(--color-logb-black-10);
    --photo-overlay-color: var(--color-logb-black-30);
    --box-background-color: color-mix(in srgb, var(--color-logb-king-blue) calc(var(--opacity-90) * 100%), transparent);

    --field-success-text-color: var(--color-feedback-success-text);
    --field-success-background-color: var(--color-feedback-success-background);
    --field-success-border-color: var(--color-feedback-success-border);
    --field-error-text-color: var(--color-feedback-error-text);
    --field-error-background-color: var(--color-feedback-error-background);
    --field-error-border-color: var(--color-feedback-error-border);

    /* ========================================
       TAGS (body default; banner uses --banner-tag-*)
       ======================================== */

    --tag-background-color: var(--color-logb-white);
    --tag-color: var(--color-logb-gray);
    --tag-border-color: var(--color-logb-khaki);
    --tag-hover-background-color: var(--color-logb-king-blue);
    --tag-hover-color: var(--color-logb-white);
    --tag-radius: var(--radius-pill);

    /* ========================================
       BUTTONS (body; banner uses --banner-button-*)
       ======================================== */

    --button-background-color: var(--color-logb-white);
    --button-hover-background-color: var(--color-logb-king-blue);
    --button-color: var(--color-logb-king-blue);
    --button-hover-color: var(--color-logb-white);
    --button-border-color: var(--color-logb-king-blue);
    --button-hover-border-color: var(--color-logb-gray);
    --button-radius: var(--radius-none);

    /* ========================================
       FAMILY TOKENS – the stack
       ======================================== */

    --font-family-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ========================================
       FAMILY USAGE – the role
       ======================================== */

    --body-font-family: var(--font-family-sans);

    /* ========================================
       TYPE TOKENS – the size / weight (rem only)
       ======================================== */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.6;
    --line-height-loose: 2;

    --letter-spacing-sm: 0.0313rem;

    /* ========================================
       TYPE USAGE – the role
       ======================================== */

    --body-font-size: var(--font-size-md);
    --body-font-weight: var(--font-weight-regular);
    --body-line-height: var(--line-height-normal);

    --heading-font-weight: var(--font-weight-semibold);
    --about-font-weight: var(--font-weight-medium);
    --heading-line-height: var(--line-height-tight);
    --compact-line-height: var(--line-height-snug);
    --heading-1-font-size: var(--font-size-3xl);
    --heading-2-font-size: var(--font-size-3xl);
    --heading-3-font-size: var(--font-size-2xl);
    --heading-4-font-size: var(--font-size-2xl);
    --heading-5-font-size: var(--font-size-xl);
    --heading-6-font-size: var(--font-size-md);

    --small-font-size: var(--font-size-sm);
    --caption-font-size: var(--font-size-xs);
    --caption-letter-spacing: var(--letter-spacing-sm);
    --lead-font-size: var(--font-size-lg);
    --search-icon-font-size: calc(var(--font-size-lg) * 1.5);

    --nav-font-size: var(--font-size-sm);
    --nav-font-weight: var(--font-weight-regular);
    --nav-line-height: var(--line-height-loose);

    --button-font-size: var(--font-size-xs);
    --button-font-weight: var(--font-weight-semibold);

    --footer-font-size: var(--font-size-xs);
    --footer-heading-font-size: var(--font-size-md);
    --footer-heading-font-weight: var(--font-weight-bold);

    --strong-font-weight: var(--font-weight-bold);

    /* ========================================
       SPACE TOKENS – the step (rem only)
       Existing xs…2xl keep their values. The extra steps fill the gaps.
       ======================================== */

    --spacing-none: 0;
    --spacing-2xs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-inner: 0.75rem;
    --spacing-md: 1rem;
    --spacing-gutter: 1.25rem;
    --spacing-lg: 1.5rem;
    --spacing-menu: 1.6rem;
    --spacing-block: 2rem;
    --spacing-xl: 2.5rem;
    --spacing-band: 3rem;
    --spacing-2xl: 3.75rem;
    --spacing-hero: 5.5rem;
    --spacing-deep: 7rem;
    --spacing-pull: 10rem;
    --spacing-stage: 15rem;
    --spacing-about: 37.85rem;
    --spacing-about-inset: 0.91875rem;
    --spacing-about-shift: 8.125rem;
    --spacing-about-box: 1.875rem;
    --spacing-slide-block: 16%;
    --spacing-slide-inline: 8%;

    /* ========================================
       SPACE USAGE – the role
       ======================================== */

    --none-space: var(--spacing-none);
    --hair-space: var(--spacing-xs);
    --tight-space: var(--spacing-sm);
    --control-space: var(--spacing-inner);
    --item-space: var(--spacing-md);
    --gutter-space: var(--spacing-gutter);
    --group-space: var(--spacing-lg);
    --block-space: var(--spacing-block);
    --menu-space: var(--spacing-menu);
    --section-space: var(--spacing-xl);
    --band-space: var(--spacing-band);
    --page-space: var(--spacing-2xl);
    --header-space: var(--spacing-hero);

    --card-padding: var(--spacing-lg);
    --service-card-padding: var(--spacing-lg);
    --box-padding: var(--spacing-xl);
    --field-padding: var(--spacing-inner) var(--spacing-gutter);
    --control-padding: var(--spacing-sm) var(--spacing-inner);
    --tag-padding: var(--spacing-xs) var(--spacing-inner);
    --button-padding: var(--spacing-xs) var(--spacing-md);

    --grid-gap: var(--spacing-lg);
    --nav-gap: var(--spacing-block);
    --cluster-gap: var(--spacing-sm);
    --size-header-logo: 2.375rem;
    --header-logo-height: var(--size-header-logo);
    --header-nav-gap: var(--spacing-gutter);
    --header-search-gap: var(--spacing-inner);

    --page-side-padding: clamp(var(--spacing-lg), 5vw, 5rem);

    /* ========================================
       MEASURE TOKENS – the page width
       ======================================== */

    --measure-sm: 12.5rem;
    --measure-menu: 15rem;
    --measure-md: 15.625rem;
    --measure-lg: 35rem;
    --measure-xl: 81.25rem;
    --measure-home: min(72rem, 80%);
    --measure-about-row: min(71.875rem, 80%);
    --measure-about-box: 41.54375rem;
    --measure-about-box-height: 19.0375rem;

    /* ========================================
       MEASURE USAGE – the role
       ======================================== */

    --thumb-measure: var(--measure-sm);
    --dropdown-measure: var(--measure-menu);
    --figure-measure: var(--measure-md);
    --icon-measure: var(--measure-lg);
    --layout-measure: var(--measure-xl);
    --home-cards-measure: var(--measure-home);
    --about-box-measure: var(--measure-about-box);
    --about-box-height: var(--measure-about-box-height);
    --about-row-measure: var(--measure-about-row);
    --about-box-space: var(--spacing-about-shift);

    --gradient-hero-pad-block: clamp(var(--spacing-band), 8vw, var(--spacing-hero));
    --tagcloud-hero-pad-block: clamp(var(--spacing-band), 8vw, var(--spacing-hero));
    --events-hero-pad-block: clamp(var(--spacing-block), 3vw, var(--spacing-hero));
    --detail-hero-pad-block: var(--spacing-hero);
    --detail-hero-pad-top-breadcrumb: var(--spacing-band);
    --detail-hero-pull-up: var(--spacing-pull);
    --detail-hero-min-height: var(--spacing-stage);
    --contact-band-padding-bottom: var(--spacing-deep);
    --about-band-padding: var(--spacing-deep) var(--spacing-none) var(--spacing-pull) var(--spacing-about-inset);
    --about-box-padding: var(--spacing-about-box) var(--spacing-xl);
    --about-band-min-height: var(--spacing-about);
    --contact-card-pull: var(--spacing-hero);
    --tagcloud-slide-pad-block: var(--spacing-slide-block);
    --tagcloud-slide-pad-inline: var(--spacing-slide-inline);

    /* ========================================
       EDGE TOKENS – stroke width / radius (rem only)
       ======================================== */

    --border-width-hairline: 0.0625rem;
    --border-width-thin: 0.125rem;
    --border-width-accent: 0.1875rem;
    --border-width-mark: 0.25rem;
    --border-width-frame: 0.3125rem;

    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-pill: 100rem;

    /* ========================================
       EDGE USAGE – the role
       ======================================== */

    --hairline-width: var(--border-width-hairline);
    --thin-width: var(--border-width-thin);
    --accent-width: var(--border-width-accent);
    --mark-width: var(--border-width-mark);
    --frame-width: var(--border-width-frame);

    --card-radius: var(--radius-none);
    --field-radius: var(--radius-sm);
    --image-radius: var(--radius-sm);

    /* ========================================
       ALIGN TOKENS – the align keyword
       ======================================== */

    --align-left: left;
    --align-center: center;
    --align-right: right;
    --align-start: start;
    --align-end: end;
    --align-stretch: stretch;

    /* ========================================
       ALIGN USAGE – the role
       ======================================== */

    --left-align: var(--align-left);
    --center-align: var(--align-center);
    --right-align: var(--align-right);
    --start-align: var(--align-start);
    --end-align: var(--align-end);
    --stretch-align: var(--align-stretch);

    /* ========================================
       OPACITY TOKENS – the alpha
       ======================================== */

    --opacity-15: 0.15;
    --opacity-60: 0.6;
    --opacity-65: 0.65;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-85: 0.85;
    --opacity-90: 0.9;
    --opacity-100: 1;

    /* ========================================
       OPACITY USAGE – the role
       ======================================== */

    --button-disabled-opacity: var(--opacity-60);
    --logo-opacity: var(--opacity-70);
    --logo-hover-opacity: var(--opacity-100);
    --event-past-opacity: var(--opacity-65);
    --event-past-hover-opacity: var(--opacity-85);
    --banner-link-hover-opacity: var(--opacity-80);
    --muted-opacity: var(--opacity-90);
    --full-opacity: var(--opacity-100);
    --footer-stamp-opacity: var(--opacity-15);
    --footer-stamp-hover-opacity: var(--opacity-70);

    /* ========================================
       LAYER TOKENS – the stack order
       ======================================== */

    --layer-0: 0;
    --layer-1: 1;
    --layer-2: 2;
    --layer-10: 10;
    --layer-11: 11;
    --layer-1000: 1000;
    --layer-1005: 1005;
    --layer-1010: 1010;
    --layer-1020: 1020;

    /* ========================================
       LAYER USAGE – the role
       ======================================== */

    --base-layer: var(--layer-0);
    --raised-layer: var(--layer-1);
    --front-layer: var(--layer-2);
    --play-layer: var(--layer-10);
    --play-icon-layer: var(--layer-11);
    --float-layer: var(--layer-1000);
    --nav-layer: var(--layer-1005);
    --menu-button-layer: var(--layer-1010);
    --header-layer: var(--layer-1020);

    /* ========================================
       CHEVRON TOKENS – the triangle sides
       ======================================== */

    --chevron-sm: 0.9375rem;
    --chevron-lg: 1.5625rem;

    /* ========================================
       CHEVRON USAGE – the role
       ======================================== */

    --play-height-chevron: var(--chevron-sm);
    --play-length-chevron: var(--chevron-lg);

    /* ========================================
       SHADOW TOKENS – the offset
       ======================================== */

    --shadow-2xs: 0 0.125rem 0.5rem;
    --shadow-xs: 0 0.125rem 1.125rem;
    --shadow-sm: 0 0.25rem 0.5rem;
    --shadow-md: 0 0.25rem 0.9375rem;
    --shadow-lg: 0 0.25rem 1rem;
    --shadow-xl: 0 0.3125rem 0.9375rem;
    --shadow-2xl: 0 0.375rem 1.125rem;
    --shadow-drop: 0 0.75rem 1.125rem -0.375rem;
    --shadow-ring-sm: 0 0 0 0.125rem;
    --shadow-ring-md: 0 0 0 0.1875rem;
    --text-shadow-sm: 0 0.0625rem 0.1875rem;
    --text-shadow-md: 0.25rem 0.25rem 0.25rem;

    /* ========================================
       SHADOW USAGE – the role
       ======================================== */

    --card-shadow: var(--shadow-xs) color-mix(in srgb, var(--color-logb-black) 8%, transparent);
    --service-card-shadow: var(--shadow-drop) color-mix(in srgb, var(--color-logb-black) 30%, transparent);
    --card-hover-shadow: var(--shadow-lg) color-mix(in srgb, var(--color-logb-black) 15%, transparent);
    --dropdown-shadow: var(--shadow-sm) color-mix(in srgb, var(--color-logb-black) 10%, transparent);
    --button-hover-shadow: var(--shadow-xl) color-mix(in srgb, var(--color-logb-black) 20%, transparent);
    --compact-hover-shadow: var(--shadow-2xs) color-mix(in srgb, var(--color-logb-black) 20%, transparent);
    --article-hover-shadow: var(--shadow-2xl) color-mix(in srgb, var(--color-logb-black) 8%, transparent);
    --video-shadow: var(--shadow-md) color-mix(in srgb, var(--color-logb-black) 20%, transparent);
    --field-focus-shadow: var(--shadow-ring-md) color-mix(in srgb, var(--color-logb-king-blue) 15%, transparent);
    --search-focus-shadow: var(--shadow-ring-sm) color-mix(in srgb, var(--color-logb-king-blue) 15%, transparent);
    --photo-heading-shadow: var(--text-shadow-md) var(--color-logb-black);
    --photo-body-shadow: var(--text-shadow-md) var(--color-logb-black);
    --photo-caption-shadow: var(--text-shadow-sm) color-mix(in srgb, var(--color-logb-white) 80%, transparent);

    /* ========================================
       MOTION TOKENS – the time and the curve
       ======================================== */

    --duration-fast: 0.2s;
    --duration-default: 0.3s;
    --duration-medium: 0.35s;
    --duration-slow: 0.4s;
    --easing-standard: ease;

    /* ========================================
       MOTION USAGE – the role
       ======================================== */

    --fast-transition: var(--duration-fast) var(--easing-standard);
    --default-transition: var(--duration-default) var(--easing-standard);
    --medium-transition: var(--duration-medium) var(--easing-standard);
    --slow-transition: var(--duration-slow) var(--easing-standard);
}

.section-with-bg .content-column:not(:empty):first-child {
    background-color: var(--banner-background-color);
}

.section-with-bg .content-column:first-child h1,
.section-with-bg .content-column:first-child h2,
.section-with-bg .content-column:first-child h3,
.section-with-bg .content-column:first-child p,
.section-with-bg .content-column:first-child a {
    color: var(--banner-text-color);
}

.section-with-bg .content-column:first-child a:hover {
    color: var(--banner-link-hover-color);
}

.section-video-bg {
    background-color: var(--banner-background-color);
}

.section-video-bg .content-column h1,
.section-video-bg .content-column h2,
.section-video-bg .content-column h3,
.section-video-bg .content-column p,
.section-video-bg .content-column a {
    color: var(--banner-text-color);
}

.section-video-bg .content-column a:hover {
    color: var(--banner-link-hover-color);
}