/*
===========================================================
              PC Phone Services
                Base Stylesheet
              Variables & Reset
                Version: 2.0
-----------------------------------------------
Variables, reset styles, and basic typography
===========================================================
*/

/* ===== CSS Variables ===== */
:root {
  /* Main Colors */
  --primary-color: #ccab56;
  --secondary-color: #231f20;
  --accent-color: #e9e1d1;
  --background-color: #f8f8f8;
  --text-color-primary: #231f20;
  --text-color-secondary: #6d6d6d;
  --white: #ffffff;
  --link: #3396cf;
  --link-visited: #1f5675;

  /* Complementary and Neutral Colors */
  --complementary-light: #f1d9a5;
  --complementary-dark: #4d4a4b;
  --neutral-gray: #a8a8a8;

  /* Alerts and Notification Colors */
  --success: #43a047;
  --info: #00acc1;
  --warning: #ffca28;
  --danger: #e53935;
  --light: #f5f5f5;
  --dark: #212121;

  /* Alert Background and Border Colors */
  --alert-primary-bg: #e9e1d1;
  --alert-secondary-bg: #d8d9db;
  --alert-success-bg: #d5e8d4;
  --alert-info-bg: #d1eaf0;
  --alert-warning-bg: #fce3b3;
  --alert-danger-bg: #f5cbcb;
  --alert-primary-border: #d1c7a3;
  --alert-secondary-border: #b2b5b8;
  --alert-success-border: #8bc34a;
  --alert-info-border: #4fc3f7;
  --alert-warning-border: #f57c00;
  --alert-danger-border: #e57373;

  /* Typography */
  --font-family: "Poppins", sans-serif;

  /* Border Radius */
  --border-radius-sm: 0.5rem;
  --border-radius: 0.75rem;
  --border-radius-lg: 1.75rem;
  --border-radius-xl: 28px;

  /* Box Shadow */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  /* Gradient */
  --gradient: linear-gradient(180deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0));

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing: 1.5rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
}

/* ===== Reset & Base Styles ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
  font-family: var(--font-family);
  color: var(--text-color-primary);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-top: 70px;
}

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

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

a:visited {
  color: var(--link-visited);
}

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

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}