/**
 * GawangPinas Landing — Base Stylesheet
 * Brand Kit & Taste Skill v2 Compliant | Clean College-Crafted CSS
 * Tokens, Reset, Typography, Contrast, and Accessibility
 */

:root {
  /* Brand Color Tokens (BRAND-KIT.md & Taste Skill v2) */
  --gp-primary: #5D1916;
  --gp-primary-hover: #5D1F14;
  --gp-primary-active: #6C3603;
  --gp-primary-light: #F5E9D4;
  --gp-primary-border: #F5E9D4;

  /* Neutral Canvas & Surfaces */
  --gp-bg: #ffffff;
  --gp-bg-soft: #FDFBF7;
  --gp-surface: #ffffff;
  --gp-surface-2: #F5F0E6;
  --gp-surface-3: #EBE2D3;

  /* Typography Colors (High Contrast WCAG AAA/AA) */
  --gp-text-main: #211914;
  --gp-text-secondary: #5D4532;
  --gp-text-muted: #675644;
  --gp-text-faint: #BA8C63;

  /* Clean Solid Borders (No Glowing Halos) */
  --gp-border: #EBE2D3;
  --gp-border-strong: #D8C6AD;

  /* Semantic Status Colors */
  --gp-success: #059669;
  --gp-success-bg: #dcfce7;
  --gp-success-text: #15803d;

  --gp-warning: #d97706;
  --gp-warning-bg: #fef3c7;
  --gp-warning-text: #b45309;

  --gp-danger: #e11d48;
  --gp-danger-bg: #ffe4e6;
  --gp-danger-text: #be123c;

  --gp-info: #C08C39;
  --gp-info-bg: #F5E9D4;
  --gp-info-text: #7D5839;

  /* Typography Stack */
  --gp-font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Strict Anti-Bubble Radius Ladder */
  --gp-radius-xs: 4px;
  --gp-radius-sm: 6px;
  --gp-radius-md: 8px;
  --gp-radius-lg: 12px;
  --gp-radius-full: 9999px; /* Reserved strictly for round circular avatars */

  /* Spacing Scale (Base 4px) */
  --gp-space-1: 4px;
  --gp-space-2: 8px;
  --gp-space-3: 12px;
  --gp-space-4: 16px;
  --gp-space-5: 20px;
  --gp-space-6: 24px;
  --gp-space-8: 32px;
  --gp-space-10: 40px;
  --gp-space-12: 48px;
  --gp-space-16: 64px;

  /* Minimal Ambient Depth (No 3D blobs, no neon halos) */
  --gp-shadow-xs: 0 1px 2px rgba(33, 25, 20, 0.04);
  --gp-shadow-sm: 0 1px 3px rgba(33, 25, 20, 0.06), 0 1px 2px rgba(33, 25, 20, 0.03);
  --gp-shadow-md: 0 4px 12px rgba(33, 25, 20, 0.08);

  /* Transitions */
  --gp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --gp-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Tabular Numerals (Prices, MOQ, Dates) */
  --gp-tabular-nums: 'tnum' 1, 'cv05' 1;
}

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

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

body {
  font-family: var(--gp-font-sans);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--gp-text-secondary);
  background-color: var(--gp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--gp-text-main);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.375rem); /* 30px - 38px */
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem); /* 22px - 28px */
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.2rem; /* ~19px */
  font-weight: 600;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1.05rem; /* ~17px */
  font-weight: 600;
}

p {
  margin-bottom: var(--gp-space-4);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--gp-primary);
  text-decoration: none;
  transition: color var(--gp-transition-fast);
}

a:hover {
  color: var(--gp-primary-hover);
}

a:active {
  color: var(--gp-primary-active);
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tabular Numerals for currency, codes, stock counts */
.tabular-nums,
[data-currency],
.price,
.moq-tag,
.table td.num {
  font-feature-settings: var(--gp-tabular-nums);
  font-variant-numeric: tabular-nums;
}

/* Reading Measure Limit (Impeccable & Brand Kit Rule) */
.prose {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Browser Surface Theming & Polish Contract */
::selection {
  background-color: #F5E9D4;
  color: #6C3603;
}

input, textarea, select {
  caret-color: var(--gp-primary);
}

:focus-visible {
  outline: 3px solid var(--gp-primary);
  outline-offset: 2px;
}

/* Clean Thin Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gp-border-strong) var(--gp-surface-2);
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: var(--gp-surface-2);
}

*::-webkit-scrollbar-thumb {
  background: var(--gp-border-strong);
  border-radius: var(--gp-radius-xs);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen reader utility */
.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;
}