/* =========================================================
   GTGSTORE GLOBAL TONE SYSTEM
   Stronger warm-cream and sage separation across displays.
   This layer only adjusts color, surfaces, borders, and depth.
   ========================================================= */

:root {
  --gtg-canvas: #eee7da;
  --gtg-canvas-soft: #e7dfd0;
  --gtg-canvas-glow: #d8dfd0;

  --gtg-surface: #f8f3e9;
  --gtg-surface-raised: #fcf8f0;
  --gtg-surface-muted: #eee7db;
  --gtg-surface-sage: #d7e0d1;

  --gtg-text: #303a33;
  --gtg-text-soft: #5f6b62;
  --gtg-text-muted: #7d877e;

  --gtg-primary: #718871;
  --gtg-primary-deep: #566c58;
  --gtg-primary-soft: #cfdac9;
  --gtg-primary-wash: #e2e9dd;

  --gtg-accent: #bd9a62;
  --gtg-accent-soft: #eadcc3;

  --gtg-border: #cbc4b7;
  --gtg-border-strong: #b7b1a4;

  --gtg-danger: #a76661;
  --gtg-danger-soft: #edd8d4;

  --gtg-shadow-soft: 0 16px 42px rgba(58, 70, 59, 0.09);
  --gtg-shadow-raised: 0 22px 58px rgba(51, 63, 53, 0.13);
}

/* =========================================================
   STOREFRONT, CATALOG, CHECKOUT, INVOICE, RECEIPT
   ========================================================= */

.storefront-theme,
.admin-theme,
.maintenance-page {
  color-scheme: light;
}

.storefront-theme {
  --store-bg: var(--gtg-canvas);
  --store-bg-soft: var(--gtg-canvas-soft);
  --store-glow: var(--gtg-canvas-glow);

  --store-surface: var(--gtg-surface);
  --store-surface-muted: var(--gtg-surface-muted);

  --store-text: var(--gtg-text);
  --store-text-soft: var(--gtg-text-soft);
  --store-text-muted: var(--gtg-text-muted);

  --store-primary: var(--gtg-primary);
  --store-primary-hover: var(--gtg-primary-deep);
  --store-primary-soft: var(--gtg-primary-soft);

  --store-accent: var(--gtg-accent);
  --store-accent-soft: var(--gtg-accent-soft);

  --store-border: var(--gtg-border);
  --store-border-strong: var(--gtg-border-strong);

  --store-danger: var(--gtg-danger);
  --store-danger-soft: var(--gtg-danger-soft);
  --store-shadow-soft: var(--gtg-shadow-soft);

  color: var(--gtg-text);
  background:
    radial-gradient(
      circle at 78% 11rem,
      rgba(200, 214, 194, 0.72) 0,
      rgba(216, 223, 208, 0.52) 16rem,
      transparent 33rem
    ),
    linear-gradient(
      180deg,
      var(--gtg-canvas) 0%,
      #f2ebdf 50%,
      var(--gtg-canvas-soft) 100%
    );
}

.storefront-header,
.storefront-footer {
  color: var(--gtg-text);
  background: rgba(242, 235, 223, 0.94);
  border-color: rgba(112, 133, 112, 0.24);
}

.storefront-hero {
  background:
    radial-gradient(
      circle at 78% 36%,
      rgba(196, 211, 190, 0.88) 0,
      rgba(218, 224, 208, 0.68) 18rem,
      transparent 37rem
    ),
    radial-gradient(
      circle at 10% 88%,
      rgba(229, 211, 180, 0.38),
      transparent 24rem
    ),
    linear-gradient(
      135deg,
      #eee7da 0%,
      #f2eadf 52%,
      #e6dece 100%
    );
  border-color: rgba(112, 133, 112, 0.21);
}

.storefront-hero > .relative > div {
  border-color: rgba(92, 111, 94, 0.22);
  background:
    linear-gradient(
      135deg,
      rgba(249, 244, 234, 0.97),
      rgba(241, 237, 225, 0.95)
    );
  box-shadow: var(--gtg-shadow-soft);
}

.storefront-products,
.storefront-benefits,
.storefront-testimonials,
.storefront-faq {
  border-color: rgba(91, 109, 92, 0.22);
  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(207, 218, 201, 0.3),
      transparent 20rem
    ),
    linear-gradient(
      145deg,
      rgba(249, 244, 234, 0.97),
      rgba(240, 234, 222, 0.96)
    );
  box-shadow: var(--gtg-shadow-soft);
}

.catalog-page,
.storefront-checkout-shell,
.storefront-invoice-page {
  background:
    radial-gradient(
      circle at 84% 8rem,
      rgba(205, 217, 199, 0.54),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      var(--gtg-canvas) 0%,
      #f1eadf 48%,
      var(--gtg-canvas-soft) 100%
    );
}

.catalog-top-inner,
.catalog-panel,
.catalog-search-panel,
.catalog-empty,
.storefront-checkout-card,
.storefront-invoice-card,
.storefront-confirmation-dialog {
  border-color: rgba(90, 108, 92, 0.23);
  background:
    linear-gradient(
      145deg,
      rgba(250, 246, 237, 0.98),
      rgba(242, 235, 223, 0.97)
    );
  box-shadow: var(--gtg-shadow-soft);
}

.catalog-search,
.catalog-sort-form select,
.storefront-form-control,
.storefront-checkout-form input,
.storefront-checkout-form textarea,
.storefront-checkout-form select,
.storefront-invoice-copy-button {
  border-color: rgba(90, 108, 92, 0.24);
  background: rgba(252, 248, 240, 0.86);
}

.storefront-secondary-button,
.storefront-confirmation-cancel {
  border-color: rgba(86, 108, 88, 0.3);
  background: rgba(249, 244, 234, 0.9);
}

/* =========================================================
   ADMIN WORKSPACE
   ========================================================= */

.admin-theme {
  --admin-bg: var(--gtg-canvas);
  --admin-surface: var(--gtg-surface);
  --admin-surface-soft: var(--gtg-surface-muted);
  --admin-sidebar: #536554;
  --admin-sidebar-deep: #405143;
  --admin-sidebar-text: #f7f0e5;
  --admin-text: var(--gtg-text);
  --admin-text-soft: var(--gtg-text-soft);
  --admin-text-muted: var(--gtg-text-muted);
  --admin-border: rgba(71, 88, 73, 0.23);
  --admin-primary: var(--gtg-primary);
  --admin-primary-deep: var(--gtg-primary-deep);
  --admin-gold: var(--gtg-accent);
  --admin-success: #5f8069;
  --admin-warning: #a5793e;
  --admin-danger: var(--gtg-danger);

  background:
    radial-gradient(
      circle at 88% 4%,
      rgba(189, 154, 98, 0.14),
      transparent 24rem
    ),
    radial-gradient(
      circle at 12% 92%,
      rgba(113, 136, 113, 0.12),
      transparent 26rem
    ),
    var(--gtg-canvas);
}

.admin-page-header,
.admin-stat-card,
.admin-action-card,
.admin-panel,
.admin-order-toolbar,
.admin-order-table-panel,
.admin-order-mobile-card,
.admin-order-info-card,
.admin-order-delivery-panel,
.admin-order-timeline-panel,
.admin-order-recovery-panel,
.admin-category-overview,
.admin-category-table-panel,
.admin-category-submit-panel,
.admin-category-mobile-card,
.admin-product-overview,
.admin-product-table-panel,
.admin-product-mobile-card,
.admin-form-panel,
.admin-form-submit-panel,
.admin-stock-summary,
.admin-stock-product-overview,
.admin-stock-table-panel,
.admin-stock-mobile-card,
.admin-stock-bulkbar,
.admin-capacity-card,
.admin-stock-search-panel,
.admin-voucher-overview,
.admin-voucher-table-panel,
.admin-voucher-usage-card,
.admin-needs-action-table-panel,
.admin-activity-table-panel,
.admin-needs-action-mobile-card,
.admin-activity-mobile-card,
.admin-settings-submit-panel,
.admin-account-list-panel,
.admin-danger-panel,
.admin-maintenance-impact-grid article {
  border-color: var(--admin-border);
  background:
    linear-gradient(
      145deg,
      rgba(249, 244, 234, 0.98),
      rgba(239, 232, 219, 0.97)
    );
  box-shadow:
    0 13px 32px rgba(54, 66, 56, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.admin-page-header {
  background:
    radial-gradient(
      circle at 94% 18%,
      rgba(189, 154, 98, 0.2),
      transparent 17rem
    ),
    radial-gradient(
      circle at 68% 120%,
      rgba(113, 136, 113, 0.12),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      rgba(249, 244, 234, 0.98),
      rgba(237, 229, 215, 0.98)
    );
}

.admin-page-date,
.admin-quick-icon,
.admin-form-control,
.admin-order-search-field input,
.admin-settings-password-input,
.admin-stock-search-field input,
.admin-stock-search-status,
.admin-order-recovery-dialog textarea,
.admin-confirm-dialog,
.admin-crop-shell {
  border-color: var(--admin-border);
  background: rgba(252, 248, 239, 0.82);
}

.admin-table thead,
.admin-order-table thead,
.admin-product-table thead,
.admin-stock-table thead,
.admin-category-table thead,
.admin-voucher-table thead,
.admin-needs-action-table thead,
.admin-activity-table thead {
  background: rgba(207, 218, 201, 0.25);
}

.admin-order-table tbody tr:hover,
.admin-product-table tbody tr:hover,
.admin-stock-table tbody tr:hover,
.admin-category-table tbody tr:hover,
.admin-voucher-table tbody tr:hover,
.admin-needs-action-table tbody tr:hover,
.admin-activity-table tbody tr:hover {
  background: rgba(207, 218, 201, 0.2);
}

/* Admin login sengaja tidak diatur di layer global ini.
   Kontrak visual login sepenuhnya dimiliki admin/login.css. */

/* =========================================================
   MAINTENANCE PAGE
   Replaces the isolated purple palette with the shared brand tone.
   ========================================================= */

.maintenance-page {
  color: var(--gtg-text);
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(190, 208, 184, 0.72),
      transparent 27rem
    ),
    radial-gradient(
      circle at 12% 88%,
      rgba(229, 210, 177, 0.5),
      transparent 25rem
    ),
    linear-gradient(135deg, #eee7da 0%, #e4ddce 48%, #f1e8dc 100%);
}

.maintenance-page::before {
  background: rgba(249, 244, 234, 0.5);
  box-shadow: -18rem 8rem 0 rgba(215, 224, 209, 0.25);
}

.maintenance-page::after {
  background: rgba(113, 136, 113, 0.14);
  box-shadow: 26rem -2rem 0 rgba(189, 154, 98, 0.13);
}

.maintenance-copy,
.maintenance-loader-panel {
  color: var(--gtg-text);
  border-color: rgba(71, 88, 73, 0.21);
  background:
    linear-gradient(
      145deg,
      rgba(250, 246, 237, 0.98),
      rgba(239, 232, 219, 0.97)
    );
  box-shadow: var(--gtg-shadow-raised);
}

.maintenance-brand,
.maintenance-support-note,
.maintenance-floating-chip {
  border-color: rgba(71, 88, 73, 0.2);
  background: rgba(248, 243, 233, 0.82);
}

.maintenance-cloud,
.maintenance-cloud::before,
.maintenance-cloud::after,
.maintenance-cloud span {
  background: rgba(248, 243, 233, 0.78);
  box-shadow: 0 18px 40px rgba(55, 68, 57, 0.08);
}

.maintenance-eyebrow,
.maintenance-loader-label {
  color: var(--gtg-primary-deep);
}

.maintenance-title,
.maintenance-loader-head strong {
  color: var(--gtg-text);
}

.maintenance-title span {
  color: transparent;
  background: linear-gradient(100deg, var(--gtg-primary-deep), var(--gtg-primary) 55%, var(--gtg-accent));
  background-clip: text;
  -webkit-background-clip: text;
}

.maintenance-description,
.maintenance-support-note p,
.maintenance-footnote,
.maintenance-loader-steps,
.maintenance-generating {
  color: var(--gtg-text-soft);
}

.maintenance-support-icon,
.maintenance-live-indicator {
  color: var(--gtg-primary-deep);
  background: rgba(113, 136, 113, 0.12);
}

.maintenance-primary-action {
  color: #faf6ee;
  background: linear-gradient(180deg, var(--gtg-primary), var(--gtg-primary-deep));
  box-shadow: 0 13px 27px rgba(67, 88, 69, 0.2);
}

.maintenance-secondary-action {
  color: var(--gtg-text);
  border-color: rgba(71, 88, 73, 0.25);
  background: rgba(249, 244, 234, 0.88);
}

.maintenance-character {
  filter: drop-shadow(0 24px 24px rgba(60, 77, 63, 0.18));
}

.maintenance-character-placeholder {
  color: var(--gtg-primary-deep);
  border-color: rgba(71, 88, 73, 0.22);
  background: linear-gradient(145deg, rgba(250, 246, 237, 0.92), rgba(218, 227, 213, 0.88));
  box-shadow: 0 24px 50px rgba(54, 68, 57, 0.14);
}

.maintenance-floating-chip {
  color: var(--gtg-primary-deep);
  box-shadow: 0 14px 32px rgba(54, 68, 57, 0.12);
}

.maintenance-floating-chip span,
.maintenance-live-indicator::before {
  background: var(--gtg-primary);
  box-shadow: 0 0 0 0.25rem rgba(113, 136, 113, 0.13);
}

.maintenance-loading-orbit {
  border-color: rgba(113, 136, 113, 0.24);
}

.maintenance-loading-orbit::before {
  background: var(--gtg-primary);
  box-shadow: 0 0 0 0.35rem rgba(113, 136, 113, 0.13);
}

.maintenance-loading-orbit::after {
  background: var(--gtg-accent);
  box-shadow: 0 0 0 0.35rem rgba(189, 154, 98, 0.13);
}

.maintenance-loader-steps span {
  color: var(--gtg-text-muted);
  border-color: rgba(71, 88, 73, 0.13);
  background: rgba(244, 238, 226, 0.84);
}

.maintenance-loader-track {
  background: rgba(113, 136, 113, 0.13);
}

.maintenance-loader-track span {
  background: linear-gradient(90deg, var(--gtg-primary-deep), var(--gtg-primary), var(--gtg-accent));
}

@media (max-width: 639px) {
  .storefront-header,
  .storefront-footer {
    background: rgba(241, 234, 221, 0.98);
  }

  .storefront-theme,
  .admin-theme,
  .maintenance-page {
    background-color: var(--gtg-canvas);
  }
}