/* ds:tabs v0.1
   ============================================================
   Oganiko Tabs — og-tabs
   Canonical component · OS-000 Tabs (tab list / section switcher)
   Source of truth: OS-000-Design-System/components/tabs/tabs.css
   ------------------------------------------------------------
   In-page section switcher. Assimilated from shadcn/21st Tabs
   patterns — principles only; restyled with ODS tokens.
   Not a raw dump. Not packages/og-tabs.css (os-002 cell,
   underline-animated, segmented). Do not load both stylesheets:
   the older file also uses the .og-tabs block.
   Token names only; fallbacks repeat current token values so the
   file works in the static catalogue. Do not invent new token values.
   version: 0.1.0 (2026-09-23) · maturity: experimental
   ------------------------------------------------------------
   Markup:
     <div class="og-tabs og-tabs--line og-tabs--md">
       <div class="og-tabs__list" role="tablist" aria-label="…"
            aria-orientation="horizontal">
         <button type="button" class="og-tabs__tab" role="tab"
                 id="tab-account" aria-selected="true"
                 aria-controls="panel-account">Account</button>
         <button type="button" class="og-tabs__tab" role="tab"
                 id="tab-delivery" aria-selected="false" tabindex="-1"
                 aria-controls="panel-delivery">Delivery</button>
       </div>
       <div class="og-tabs__panel" role="tabpanel" id="panel-account"
            aria-labelledby="tab-account">…</div>
       <div class="og-tabs__panel" role="tabpanel" id="panel-delivery"
            aria-labelledby="tab-delivery" hidden>…</div>
     </div>
   ============================================================ */

.og-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 1rem);
  font-family: var(--font-primary, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
  color: var(--color-text, #000000);
  max-width: 100%;
}

.og-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-1, 0.25rem);
}

.og-tabs__tab {
  appearance: none;
  margin: 0;
  font-family: inherit;
  font-weight: var(--weight-medium, 500);
  line-height: var(--leading-snug, 1.25);
  color: var(--color-text-secondary, #333333);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.og-tabs--sm .og-tabs__tab {
  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
  font-size: var(--text-sm, 0.875rem);
}

.og-tabs--md .og-tabs__tab,
.og-tabs:not(.og-tabs--sm) .og-tabs__tab {
  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
}

.og-tabs__tab:hover:not(:disabled):not([aria-selected='true']) {
  color: var(--color-text, #000000);
}

.og-tabs__tab:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

.og-tabs__tab:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.og-tabs__tab .og-tabs__icon,
.og-tabs__tab iconify-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: currentColor;
}

/* ── line (default) — quiet rule under the selected label ── */
.og-tabs--line .og-tabs__list,
.og-tabs:not(.og-tabs--pill) .og-tabs__list {
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.og-tabs--line .og-tabs__tab,
.og-tabs:not(.og-tabs--pill) .og-tabs__tab {
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  margin-bottom: -1px;
}

.og-tabs--line .og-tabs__tab:hover:not(:disabled):not([aria-selected='true']),
.og-tabs:not(.og-tabs--pill) .og-tabs__tab:hover:not(:disabled):not([aria-selected='true']) {
  background: var(--color-bg-muted, #f5f5f3);
}

.og-tabs--line .og-tabs__tab[aria-selected='true'],
.og-tabs:not(.og-tabs--pill) .og-tabs__tab[aria-selected='true'] {
  color: var(--color-text, #000000);
  font-weight: var(--weight-semibold, 600);
  border-bottom-color: var(--color-text, #000000);
}

/* ── pill — muted track, raised selected tab (no brand-green fill) ── */
.og-tabs--pill .og-tabs__list {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: var(--spacing-1, 0.25rem);
  background: var(--color-bg-muted, #f5f5f3);
  border-radius: var(--radius-lg, 12px);
}

.og-tabs--pill .og-tabs__tab {
  border-radius: var(--radius-md, 8px);
}

.og-tabs--pill .og-tabs__tab[aria-selected='true'] {
  color: var(--color-text, #000000);
  font-weight: var(--weight-semibold, 600);
  background: var(--color-bg, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.og-tabs__panel {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-lg, 12px);
  padding: var(--spacing-6, 1.5rem);
}

.og-tabs--sm .og-tabs__panel {
  padding: var(--spacing-4, 1rem);
}

.og-tabs__panel[hidden] {
  display: none;
}

.og-tabs__panel:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

.og-tabs__panel-title {
  margin: 0 0 var(--spacing-2, 0.5rem);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-snug, 1.25);
  color: var(--color-text, #000000);
}

.og-tabs__panel-lead {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-regular, 400);
  line-height: var(--leading-normal, 1.5);
  color: var(--color-text-secondary, #333333);
}

@media (prefers-reduced-motion: reduce) {
  .og-tabs__tab {
    transition: none;
  }
}