:root {
    /* Core Palette */
    --obsidian: #08090B;
    --carbon: #0F1013;
    --graphite: #18191D;
    --steel: #2A2B30;
    --ash: #4A4B52;
    --mute: #7B7C82;
    --concrete: #9C9DA3;
    --bone: #C8C5BD;
    --arctic: #E4E8ED;

    /* Signature Accents */
    --ember: #FC6A03;
    --ember-deep: #C2530B;
    --crimson: #E63946;
    --crimson-deep: #8C1820;

    /* Typography */
    --font-ui: 'Archivo', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-arabic: 'Reem Kufi', sans-serif;
    --font-display: 'Big Shoulders Display', sans-serif;

    /* Baseline Spacing Unit (4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Motion */
    --motion-instant: 0ms;
    --motion-fast: 120ms;
    --motion-base: 200ms;
}

/* Base Restraint */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    background-color: var(--obsidian);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    padding: var(--space-6);
    -webkit-font-smoothing: antialiased;
}

/* Accessibility: Skip Link */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    background-color: var(--obsidian);
    color: var(--bone);
    padding: var(--space-2);
    outline: 2px solid var(--ember);
    outline-offset: 2px;
    text-decoration: none;
}

/* Component: Classification Tag */
.tag-classification {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tag-t3 {
    color: var(--ember);
}

.tag-t3::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--ember);
}

.tag-divider {
    width: 1px;
    height: 12px;
    background-color: var(--steel);
    margin-inline: var(--space-2);
}

.tag-arabic {
    font-family: var(--font-arabic);
    font-weight: 700;
    font-size: 13.2px;
    /* +10% optical adjustment */
    letter-spacing: 0;
    /* Prohibited in Arabic */
}

/* Component: Operational Alert */
.alert-operational {
    border-left: 1px solid var(--ember);
    padding-inline-start: var(--space-3);
    margin-bottom: var(--space-6);
}

.alert-operational strong {
    color: var(--ember);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-1);
}

.alert-operational span {
    color: var(--concrete);
    font-size: 14px;
}

/* Component: Primary Button */
.btn-primary {
    height: 40px;
    padding-inline: 20px;
    background-color: var(--ember);
    color: var(--obsidian);
    border: none;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--motion-fast) linear;
}

.btn-primary:hover {
    background-color: var(--ember-deep);
}

.btn-primary:focus {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}