/**
 * Okolica Brand System v8 — bridge onto existing page CSS variables.
 * Load AFTER okolica-v8-theme.css. Does not replace logos or markup.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap");

:root {
  /* Bridge → Next globals / generic UI */
  --bg: var(--ok-paper);
  --card: var(--ok-white);
  --accent: var(--ok-orange);
  --accent-hover: var(--ok-orange-hover);
  --accent-soft: #FFF1EA;
  --text: var(--ok-ink);
  --muted: var(--ok-muted);
  --border: var(--ok-line);
  --border-soft: #E6E8E3;
  --shadow: 0 10px 28px rgba(28, 28, 28, 0.08);
  --radius: var(--ok-radius);
  --gutter: clamp(16px, 3vw, var(--ok-side-gutter));
  --max: var(--ok-container-max);

  /* Bridge → Admin design tokens */
  --color-primary: var(--ok-orange);
  --color-primary-hover: var(--ok-orange-hover);
  --color-primary-soft: rgba(255, 90, 38, 0.1);
  --color-border-default: var(--ok-line);
  --color-border-strong: #C5C9C2;
  --color-border-focus: var(--ok-orange);
  --font-sans: var(--ok-ui-font);
  --font-display: var(--ok-display-font);
  --btn-radius: var(--ok-radius-sm);
  --input-radius: var(--ok-radius);

  /* Bridge → Admin shell */
  --ap-accent: var(--ok-orange);
  --ap-accent-2: var(--ok-orange-hover);
  --ap-accent-soft: rgba(255, 90, 38, 0.1);
  --ap-font: var(--ok-ui-font);
}

html,
body {
  background: var(--ok-paper) !important;
  color: var(--ok-ink);
  font-family: var(--ok-ui-font) !important;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
.ap-brand-text,
.logo-name,
.section-title,
.ok-section-title {
  font-family: var(--ok-display-font);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Storefront roots used across pages */
#okolica-home-root,
#okolica-product-root,
#okolica-catalog-root,
#okolica-account-root,
#okolica-checkout-root,
#okolica-seller-root,
#okolica-storage-root,
.okolica-home,
.okolica-product,
.okolica-catalog,
.okolica-account,
.okolica-checkout,
.okolica-seller,
.okolica-storage,
.okolica-become-seller,
.okolica-login {
  --bg-color: var(--ok-paper);
  --card-bg: var(--ok-white);
  --surface: var(--ok-white);
  --surface-alt: var(--ok-warm);
  --surface-muted: #F3F3EF;
  --sidebar-bg: var(--ok-white);
  --accent-color: var(--ok-orange);
  --accent-hover: var(--ok-orange-hover);
  --text-main: var(--ok-ink);
  --text-muted: var(--ok-muted);
  --border-color: var(--ok-line);
  --border-strong: var(--ok-border-strong);
  --shadow-sm: 0 1px 3px rgba(28, 28, 28, 0.07);
  --shadow-md: 0 10px 28px rgba(28, 28, 28, 0.08);
  --container-width: var(--ok-container-max);
  --page-gutter: clamp(16px, 3vw, var(--ok-side-gutter));
  font-family: var(--ok-ui-font) !important;
  background-color: var(--ok-paper);
  color: var(--ok-ink);
}

#okolica-home-root h1,
#okolica-home-root h2,
#okolica-product-root h1,
#okolica-product-root h2,
#okolica-catalog-root h1,
#okolica-catalog-root h2,
#okolica-account-root h1,
#okolica-account-root h2 {
  font-family: var(--ok-display-font);
  font-weight: 700;
}

/* Primary buttons across storefront roots — white label on orange CTA */
#okolica-home-root .btn-primary,
#okolica-product-root .btn-primary,
#okolica-catalog-root .btn-primary,
#okolica-account-root .btn-primary,
#okolica-checkout-root .btn-primary,
.okolica-home .btn-primary,
.p-cart-btn,
.ok-waitlist-btn,
.search-btn {
  background-color: var(--ok-orange) !important;
  color: #fff !important;
  border-radius: var(--ok-radius-sm);
}

#okolica-home-root .btn-primary:hover,
#okolica-product-root .btn-primary:hover,
#okolica-catalog-root .btn-primary:hover,
.okolica-home .btn-primary:hover {
  background-color: var(--ok-orange-hover) !important;
}

/* Admin shell surfaces */
.ap-root,
.ap-wrap {
  --ap-accent: var(--ok-orange);
  --ap-accent-2: var(--ok-orange-hover);
  --ap-accent-soft: rgba(255, 90, 38, 0.1);
  --ap-font: var(--ok-ui-font);
  font-family: var(--ok-ui-font);
}

.ap-root {
  background: var(--ok-paper);
  color: var(--ok-ink);
}

.ap-btn:not(.secondary):not(.ghost):not(.danger),
.btn-primary {
  background: var(--ok-orange) !important;
  border-color: var(--ok-orange) !important;
  color: #fff !important;
  border-radius: var(--ok-radius-sm);
}

.ap-btn:not(.secondary):not(.ghost):not(.danger):hover,
.btn-primary:hover {
  background: var(--ok-orange-hover) !important;
  border-color: var(--ok-orange-hover) !important;
}

.ap-brand-text,
.ap-mega__h {
  font-family: var(--ok-display-font);
}

/* Nice-select / focus accents */
.nice-select:focus,
.nice-select.open,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ok-orange) !important;
}

:where(a, button, select, input, textarea):focus-visible {
  outline: 2px solid var(--ok-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}