/* ==========================================================================
   StatusForge — base
   Reset, primitives and shared components. Every value resolves to a token
   from tokens.css; nothing here hardcodes a colour or a size.
   All directional properties are logical (inline/block) so RTL locales work
   without a single extra rule.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    tab-size: 4;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    line-height: var(--sf-leading-normal);
    color: var(--sf-text);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--sf-leading-tight);
    text-wrap: balance;
    font-weight: var(--sf-weight-semibold);
    letter-spacing: var(--sf-tracking-tight);
}

p {
    text-wrap: pretty;
}

a {
    color: var(--sf-accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--sf-accent-hover);
}

/* A single, consistent focus ring everywhere. Never removed — only styled. */
:focus-visible {
    outline: var(--sf-focus-ring);
    outline-offset: var(--sf-focus-offset);
    border-radius: var(--sf-radius-xs);
}

/* ---- Layout primitives --------------------------------------------------- */

.sf-container {
    width: 100%;
    max-width: var(--sf-container);
    margin-inline: auto;
    padding-inline: var(--sf-space-5);
}

.sf-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sf-skip-link {
    position: absolute;
    inset-block-start: var(--sf-space-2);
    inset-inline-start: var(--sf-space-2);
    z-index: 100;
    padding: var(--sf-space-2) var(--sf-space-4);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    box-shadow: var(--sf-shadow);
    transform: translateY(-200%);
    transition: transform var(--sf-duration-fast) var(--sf-ease);
}

.sf-skip-link:focus {
    transform: translateY(0);
}

/* ---- Buttons ------------------------------------------------------------- */

.sf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    /* 44px minimum touch target, per WCAG 2.5.5 */
    min-block-size: 2.75rem;
    padding: var(--sf-space-2) var(--sf-space-5);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-weight-medium);
    color: var(--sf-text);
    text-decoration: none;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    transition: background var(--sf-duration-fast) var(--sf-ease),
                border-color var(--sf-duration-fast) var(--sf-ease),
                transform var(--sf-duration-instant) var(--sf-ease);
}

.sf-button:hover {
    color: var(--sf-text);
    background: var(--sf-bg-subtle);
    border-color: var(--sf-border-strong);
}

.sf-button:active {
    transform: translateY(1px);
}

.sf-button--primary {
    color: var(--sf-accent-fg);
    background: var(--sf-accent);
    border-color: transparent;
}

.sf-button--primary:hover {
    color: var(--sf-accent-fg);
    background: var(--sf-accent-hover);
}

.sf-button--small {
    min-block-size: 2.25rem;
    padding-inline: var(--sf-space-3);
    font-size: var(--sf-text-xs);
}

.sf-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--sf-text-muted);
    border: 1px solid transparent;
    border-radius: var(--sf-radius-sm);
    transition: background var(--sf-duration-fast) var(--sf-ease),
                color var(--sf-duration-fast) var(--sf-ease);
}

.sf-icon-button:hover {
    color: var(--sf-text);
    background: var(--sf-bg-subtle);
}

/* ---- Icons --------------------------------------------------------------- */

.sf-icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Forms --------------------------------------------------------------- */

.sf-input {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--sf-space-2) var(--sf-space-3);
    color: var(--sf-text);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    transition: border-color var(--sf-duration-fast) var(--sf-ease),
                box-shadow var(--sf-duration-fast) var(--sf-ease);
}

.sf-input:focus {
    outline: none;
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px var(--sf-accent-ring);
}

.sf-input::placeholder {
    color: var(--sf-text-subtle);
}

/* ---- Status primitives --------------------------------------------------- */

.sf-dot {
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--sf-radius-full);
    background: var(--sf-nodata);
}

.sf-dot--up          { background: var(--sf-up); }
.sf-dot--down        { background: var(--sf-down); }
.sf-dot--degraded    { background: var(--sf-degraded); }
.sf-dot--maintenance { background: var(--sf-maintenance); }
.sf-dot--paused      { background: var(--sf-paused); }

.sf-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    padding: 0.25rem var(--sf-space-2);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-medium);
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--sf-radius-full);
}

.sf-pill__icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-pill--up          { color: var(--sf-up-text);          background: var(--sf-up-soft);          border-color: var(--sf-up-border); }
.sf-pill--down        { color: var(--sf-down-text);        background: var(--sf-down-soft);        border-color: var(--sf-down-border); }
.sf-pill--degraded    { color: var(--sf-degraded-text);    background: var(--sf-degraded-soft);    border-color: var(--sf-degraded-border); }
.sf-pill--maintenance { color: var(--sf-maintenance-text); background: var(--sf-maintenance-soft); border-color: var(--sf-maintenance-border); }
.sf-pill--paused,
.sf-pill--nodata      { color: var(--sf-text-muted);  background: var(--sf-nodata-soft);      border-color: var(--sf-border); }

/* ---- Notices ------------------------------------------------------------- */

.sf-notice {
    display: flex;
    gap: var(--sf-space-3);
    align-items: flex-start;
    padding: var(--sf-space-4);
    margin-block: var(--sf-space-6);
    font-size: var(--sf-text-sm);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-surface);
}

.sf-notice .sf-icon {
    flex-shrink: 0;
    margin-block-start: 0.1rem;
}

.sf-notice--warning {
    color: var(--sf-text);
    background: var(--sf-degraded-soft);
    border-color: var(--sf-degraded-border);
}

.sf-notice--warning .sf-icon {
    color: var(--sf-degraded-text);
}

.sf-notice--info {
    color: var(--sf-text);
    background: var(--sf-accent-subtle);
    border-color: var(--sf-accent-ring);
}

.sf-notice--info .sf-icon {
    color: var(--sf-accent-text);
}

/* ---- Charts -------------------------------------------------------------- */

.sf-spark {
    inline-size: 100%;
    block-size: 28px;
    overflow: visible;
}

.sf-spark__line {
    fill: none;
    stroke: var(--sf-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sf-spark__area {
    fill: var(--sf-accent-subtle);
    stroke: none;
}

.sf-chart__grid {
    stroke: var(--sf-chart-grid);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.sf-chart__line {
    fill: none;
    stroke: var(--sf-chart-line);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sf-chart__area {
    fill: var(--sf-accent-subtle);
    stroke: none;
}

.sf-chart__p95 { stroke: var(--sf-chart-p95); stroke-width: 1; stroke-dasharray: 4 3; }
.sf-chart__p99 { stroke: var(--sf-chart-p99); stroke-width: 1; stroke-dasharray: 4 3; }

.sf-chart__outage { fill: var(--sf-down); }

.sf-chart__label,
.sf-chart__reflabel {
    font-size: 10px;
    fill: var(--sf-text-subtle);
}