/* ============================================================
   iQommerce / Hizen — Brand Design Tokens (POS)
   Matches main store: enterprise-ui.css + footer theme
   ============================================================ */
:root {
  /* Brand greens */
  --green_clr:         #074b4b;
  --green_clr_light:   #107272;
  --green_clr_gradient: linear-gradient(to right, var(--green_clr) 0%, var(--green_clr_light) 100%);

  /* Typography */
  --iq-font:           'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --iq-text:           #074b4b;
  --iq-text-muted:     #3a5151cc;
  --iq-black:          #043030;

  /* Surfaces — light creamy style */
  --iq-surface-1:      #ffffff;
  --iq-surface-2:      #f8f9fa;
  --iq-cream:          #faf8f5;
  --iq-cream-dark:     #f3f0eb;
  --iq-gray-100:       #ebebeb;
  --iq-gray-200:       #dedede;

  /* Status */
  --iq-success:        #2ecc71;
  --iq-warning:        #f39c12;
  --iq-danger:         #e74c3c;
  --iq-info:           #3498db;
  --iq-green-light:    #e8f8f0;

  /* POS aliases (used across style.css + pro-ui.css) */
  --primary:           var(--green_clr);
  --primary-dark:      #043030;
  --primary-light:     #e8f4f4;
  --primary-muted:     #b8d8d8;
  --accent:            var(--green_clr);

  --sidebar-bg:        var(--green_clr);
  --sidebar-hover:     rgba(255,255,255,.1);
  --sidebar-active:    rgba(255,255,255,.18);
  --sidebar-text:      rgba(255,255,255,.85);
  --sidebar-border:    var(--green_clr_light);

  --body-bg:           var(--iq-cream);
  --card-bg:           var(--iq-surface-1);
  --card-radius:       12px;
  --card-shadow:       0 2px 12px rgba(7,75,75,.08);
  --border-color:      var(--iq-gray-200);

  --text:              var(--iq-text);
  --text-muted:        var(--iq-text-muted);

  --success:           var(--iq-success);
  --success-light:     var(--iq-green-light);
  --danger:            var(--iq-danger);
  --danger-light:      #fdecea;
  --warning:           var(--iq-warning);
  --warning-light:     #fef5e7;
  --info:              var(--iq-info);
  --info-light:        #eaf4fc;

  --osb-w:             260px;
  --osb-w-sm:          72px;
  --topbar-h:          64px;
  --modtabs-h:         44px;
}

/* Base typography */
body {
  font-family: var(--iq-font);
  font-size: 14px;
  color: var(--iq-text);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-header h4,
.modal-title {
  font-family: var(--iq-font);
  color: var(--iq-text);
}

/* Primary gradient buttons — skip on Shopify admin (components.css handles it) */
body:not(.shopify-admin) .btn-primary,
body:not(.shopify-admin) .otb-pos-btn,
body:not(.shopify-admin) .pay-mode-btn.active,
body:not(.shopify-admin) .btn-auth-submit,
body:not(.shopify-admin) .btn-hero-primary,
body:not(.shopify-admin) .btn-landing-login {
  background: var(--green_clr_gradient) !important;
  border-color: var(--green_clr) !important;
  color: #fff !important;
}

body:not(.shopify-admin) .btn-primary:hover,
body:not(.shopify-admin) .otb-pos-btn:hover,
body:not(.shopify-admin) .btn-auth-submit:hover,
body:not(.shopify-admin) .btn-hero-primary:hover {
  filter: brightness(1.06);
  background: var(--green_clr_gradient) !important;
}

.btn-outline-primary {
  color: var(--green_clr);
  border-color: var(--green_clr);
}

.btn-outline-primary:hover {
  background: var(--green_clr_gradient);
  border-color: var(--green_clr);
  color: #fff;
}

.text-primary { color: var(--green_clr) !important; }