/* ==========================================================================
   EMMORDSE DESIGN SYSTEM (YURISHOP.CO/ID OFFICIAL STORE EDITION)
   Kepatuhan Antislop: WCAG AA (>4.5:1), Tap Target Min 44px, Keyboard Accessible
   ========================================================================== */

:root {
  /* Palet Warna Teruji Yuri Shop */
  --color-brand-primary: #0A2540;
  --color-brand-primary-hover: #071A2E;
  /* Token aksi tunggal (Opsi A: teal)
     Seluruh elemen interaktif memakai token ini agar hanya ada satu warna aksi. */
  --color-action: #007A78;
  --color-action-hover: #00605E;
  --color-action-strong: #0F766E;
  --color-action-tint: #E6F4F3;
  /* Varian tint untuk latar gelap seperti footer */
  --color-action-tint-dark: rgba(0, 122, 120, 0.25);

  /* Keluarga warna promo/diskon, dipakai konsisten pada badge, pill, dan label.
     Nilai dipilih agar teks lolos kontras WCAG AA. */
  --color-promo: #DC2626;
  --color-promo-strong: #B91C1C;
  --color-promo-tint: #FEE2E2;
  
  --color-bg-main: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F1F5F9;
  
  --color-text-main: #0F172A;
  --color-text-muted: #475569;
  --color-text-light: #64748B;
  --color-text-inverse: #FFFFFF;
  
  --color-border: #E2E8F0;
  --color-border-hover: #CBD5E1;
  --color-border-focus: #0A2540;
  
  /* Status Semantik */
  --color-badge-safe-bg: #ECFDF5;
  --color-badge-safe-text: #065F46;
  --color-badge-warning-bg: #FEF3C7;
  --color-badge-warning-text: #92400E;
  --color-badge-industrial-bg: #EFF6FF;
  --color-badge-industrial-text: #1E40AF;
  --color-badge-info-bg: #F3E8FF;
  --color-badge-info-text: #6B21A8;

  --color-danger: #BE123C;
  --color-danger-bg: #FFE4E6;

  /* Tipografi */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Spasi & Ukuran */
  /* Skala radius tunggal: kontrol 8px, kartu/panel 12px, modal/hero 16px, pill 999px */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);

  --max-width: 1600px;
  --header-height: 80px;
}

/* Reset Dasar */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Fokus Aksesibilitas Keyboard (R-32) */
:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

/* Utilitas & Kontainer Full Width */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1400px) {
  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}