/**
 * YemBlue Shared Styles — Aligned to Unified 2026 Design Tokens
 * @package YemBlueCore
 */

/* ======================================================================
   PHASE 1 · DESIGN SYSTEM — DUPLICATE TOKEN BLOCK REMOVED
   ----------------------------------------------------------------------
   The :root block that used to live here re-declared --yb-navy,
   --yb-deep-ocean, --yb-ocean, --yb-cyan, --yb-border, --yb-radius-* and
   the rest with the pre-2026-09-28 palette (#0A2640 / #0E6B93 / #061A2E).

   Because yemblue-shared.css loads AFTER main.css (which @imports
   assets/tokens.css), the later block silently won the cascade. The site
   was therefore rendering the legacy palette, not the approved identity,
   and tokens.css was dead weight.

   All tokens now come from ONE place: assets/tokens.css.
   Every name used below is still defined there, so nothing in this
   stylesheet changed meaning other than resolving to the approved value.

   DO NOT re-add a :root block to this file. Adding a token? Edit
   assets/tokens.css and version it there.
   ====================================================================== */
.yb-theme { font-family: 'IBM Plex Sans Arabic', 'Montserrat', system-ui, sans-serif; color: var(--yb-text); background: var(--yb-surface); }
.yb-theme *, .yb-theme *::before, .yb-theme *::after { box-sizing: border-box; }
.yb-theme a { color: var(--yb-ocean); }
.yb-theme :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid var(--yb-focus); outline-offset: 2px; }

.yb-header { color: #fff; background: linear-gradient(135deg, var(--yb-deep-ocean), var(--yb-navy) 58%, var(--yb-ocean)); border-top: 3px solid var(--yb-aqua); border-radius: var(--yb-radius-lg); padding: 22px 24px; box-shadow: var(--yb-shadow-md); }
.yb-header__brand { display: flex; align-items: center; gap: 12px; }
.yb-header__brand img { width: 48px; height: 48px; object-fit: contain; padding: 5px; border-radius: var(--yb-radius-sm); background: rgba(255,255,255,.13); }
.yb-header__unit { color: #fff; font-size: 1.05rem; font-weight: 900; }
.yb-header__meta { color: rgba(255,255,255,.88); font-size: .82rem; }

.yb-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; margin: 16px 0; background: var(--yb-surface-raised); border: 1px solid var(--yb-border); border-radius: var(--yb-radius-md); box-shadow: var(--yb-shadow-sm); }
.yb-nav__label { color: var(--yb-navy); font-size: .82rem; font-weight: 900; margin-inline-end: 4px; }
.yb-nav__link, .yb-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--yb-border); border-radius: var(--yb-radius-sm); background: var(--yb-surface-raised); color: var(--yb-navy); font: 800 .86rem/1.2 'IBM Plex Sans Arabic', 'Montserrat', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color var(--yb-motion-fast), border-color var(--yb-motion-fast), color var(--yb-motion-fast), box-shadow var(--yb-motion-fast); }
.yb-nav__link:hover, .yb-nav__link[aria-current="page"], .yb-button:hover { background: var(--yb-sky); border-color: var(--yb-aqua); color: var(--yb-navy); box-shadow: var(--yb-shadow-sm); }
.yb-button--primary { background: var(--yb-ocean); border-color: var(--yb-ocean); color: #fff; }
.yb-button--primary:hover { background: var(--yb-navy); border-color: var(--yb-navy); color: #fff; }
.yb-button--danger { background: var(--yb-danger); border-color: var(--yb-danger); color: #fff; }
.yb-button:disabled { opacity: .58; cursor: not-allowed; }

.yb-card { background: var(--yb-surface-raised); border: 1px solid var(--yb-border); border-radius: var(--yb-radius-md); box-shadow: var(--yb-shadow-sm); padding: 18px; }
.yb-card__title { color: var(--yb-navy); margin-top: 0; font-weight: 900; }
.yb-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--yb-border); border-radius: var(--yb-radius-sm); color: var(--yb-text); background: #fff; font: 600 .92rem/1.4 'IBM Plex Sans Arabic', 'Montserrat', system-ui, sans-serif; }
.yb-input:focus { border-color: var(--yb-ocean); outline: 0; box-shadow: 0 0 0 3px rgba(14,107,147,.18); }
.yb-muted { color: var(--yb-text-muted); }

@media (max-width: 640px) { .yb-nav { align-items: stretch; } .yb-nav__label, .yb-nav__link, .yb-button { flex: 1 1 100%; } .yb-header { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; } }