/* Premium design tokens (behavior-safe visual layer)
 * Goal: unify color, elevation, radius, focus, and motion across Web-UI.
 * Scope: CSS variables only; no markup/JS/PHP contract changes.
 */

/* 2026-04-05: rem anchor — browser default 16px.
 * Users can override via browser settings → all rem values scale.
 * Browser zoom (Ctrl+/-) also scales rem-based layout. */
:root {
    font-size: 16px;
}

body.page-header-fixed {
    /* Brand + semantic colors */
    --sf-color-brand: #bf1e2e;
    --sf-color-accent: #1a73b8;
    --sf-color-text-strong: #243242;
    --sf-color-text: #334a60;
    --sf-color-text-muted: #5f7388;
    --sf-color-surface-0: #ffffff;
    --sf-color-surface-1: #f8fbff;
    --sf-color-surface-2: #eef4fb;
    --sf-color-border-soft: #dbe4ef;
    --sf-color-border-mid: #c7d5e3;
    --sf-color-focus: #7f9fbe;

    /* Shared aliases consumed by existing modern files */
    --sf-card-bg: var(--sf-color-surface-0);
    --sf-card-border: var(--sf-color-border-soft);
    --sf-text-strong: var(--sf-color-text-strong);
    --sf-text-muted: var(--sf-color-text-muted);
    --sf-primary: var(--sf-color-brand);

    /* Elevation system */
    --sf-shadow-soft: 0 6px 14px rgba(35, 51, 68, 0.1);
    --sf-shadow-card: 0 10px 22px rgba(30, 44, 60, 0.14);
    --sf-shadow-float: 0 16px 32px rgba(24, 36, 50, 0.2);
    --sf-card-shadow: var(--sf-shadow-card);

    /* 2026-04-05: Orange stripe — used in primary-stripe buttons across all pages */
    --sf-color-orange: #F47721;

    /* Radius + motion */
    --sf-radius-sm: 8px;
    --sf-radius-md: 12px;
    --sf-radius-lg: 16px;
    --sf-motion-fast: 140ms ease;
    --sf-motion-mid: 180ms ease;

    /* 2026-04-05: Typography scale (rem-based for zoom/accessibility) */
    --sf-fs-0: 0.8125rem;      /* 13px — body text, table cells, form labels */
    --sf-fs-1: 0.875rem;       /* 14px — portlet titles, button text */
    --sf-fs-2: 1.125rem;       /* 18px — page headings */
    --sf-fs-help: 0.75rem;     /* 12px — helper text, para-comm */
    --sf-lh-body: 1.5;
    --sf-lh-tight: 1.3;
    --sf-lh-title: 1.2;

    /* 2026-04-05: Form sizing (rem-based for zoom scaling) */
    --sf-input-height: 1.875rem; /* 30px — form control min-height */
}

/* Consistent focus visibility for keyboard navigation */
body.page-header-fixed .page-content a:focus-visible,
body.page-header-fixed .page-content button:focus-visible,
body.page-header-fixed .page-content .btn:focus-visible,
body.page-header-fixed .page-content input:focus-visible,
body.page-header-fixed .page-content select:focus-visible,
body.page-header-fixed .page-content textarea:focus-visible {
    outline: 2px solid rgba(127, 159, 190, 0.45);
    outline-offset: 1px;
    box-shadow: 0 0 0 2px rgba(26, 115, 184, 0.12);
}

/* Motion safety for users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.page-header-fixed * {
        transition: none !important;
        animation: none !important;
    }
}