/*
 * Overpay - Shop Amazon with Zcash
 * Minimalist, professional design
 */

/* ==========================================================================
   CSS Variables & Base Styles
   ========================================================================== */

:root {
  /* Colors - Clean light theme */
  --color-bg: #ffffff;
  --color-bg-secondary: #f7f7f7;
  --color-bg-tertiary: #ededed;

  --color-text: #111111;
  --color-text-secondary: #565959;
  --color-text-tertiary: #888888;

  --color-link: #007185;
  --color-link-hover: #c7511f;

  --color-accent: #636fe9;
  --color-accent-dark: #4f5bd5;

  --color-price: #b12704;
  --color-success: #067d62;
  --color-error: #c40000;
  --color-warning: #c7511f;

  --color-border: #dddddd;
  --color-border-dark: #888888;

  /* Typography - System fonts, Apple preferred */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Max widths */
  --max-width: 1200px;
  --max-width-narrow: 800px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.main-content {
  flex: 1;
}