:root {
  /* Colors */
  --color-primary:        #E8682A;
  --color-primary-dark:   #C7531F;
  --color-secondary:      #7B2D8B;
  --color-bg-lavender:    #EDE8F5;
  --color-bg-page:        #F5F5F5;
  --color-bg-white:       #FFFFFF;
  --color-bg-hover:       #F0F0F0;
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-link:      #E8682A;
  --color-success:        #4CAF50;
  --color-danger:         #D32F2F;
  --color-border:         #E0E0E0;
  --color-tab-active:     #E8682A;
  --color-tab-inactive:   #9E9E9E;
  --color-desktop-bg:     #E8E8E8;
  --color-overlay:        rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

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

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* Layout */
  --screen-max-width: 390px;
  --screen-height:    844px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    150ms;
  --duration-medium:  280ms;
  --duration-slow:    320ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-desktop-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Mobile frame centered on desktop */
#app {
  width: 100%;
  max-width: var(--screen-max-width);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--color-bg-page);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

@media (max-width: 390px) {
  body { background: var(--color-bg-page); }
  #app { box-shadow: none; }
}

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}