/*
===========================================================
  PC Phone Services — Base Stylesheet
  Version: 3.0 (Phase 2 — design tokens + reset)

  This file is the SINGLE source of truth for design tokens.
  Do not redefine these variables in other stylesheets.

  Layout of this file:
    1. Modern token system       (brand / semantic / scale)
    2. Legacy aliases            (bridge for pre-3.0 CSS)
    3. Modern reset
    4. Base typography
    5. Base elements             (img, a, lists, form controls)
===========================================================
*/

/* ============================================================
   1. MODERN TOKEN SYSTEM
   ============================================================ */
:root {
  /* --- Brand colors (preserve PPS identity) ----------------- */
  --brand-gold: #ccab56;
  --brand-gold-dark: #b4922e;
  --brand-gold-soft: #f1d9a5;
  --brand-black: #231f20;
  --brand-cream: #e9e1d1;
  /* Gold for TEXT on a light surface. --brand-gold is a 2.1:1 contrast against
     white — fine for a rule, a border or a filled badge, not for the 12–14px
     labels and prices that were using it. This value clears 4.5:1 on all three
     light surfaces: white 5.8, --surface-alt 5.5, --surface-sunken 5.0. */
  --gold-text: #7d611d;

  /* --- Surfaces --------------------------------------------- */
  --surface: #ffffff;
  --surface-alt: #f8f8f8;
  --surface-sunken: #f1ede4;

  /* --- Text ------------------------------------------------- */
  --text: #231f20;
  /* Darkened from #6d6d6d: at 14px on the sunken band that value measured
     4.43:1, just under the 4.5:1 floor. This clears it on every surface. */
  --text-muted: #5c5c5c;
  --text-inverse: #ffffff;

  /* --- Borders ---------------------------------------------- */
  --border-color: #e5e0d4;
  --border-strong: #c9c2b0;

  /* --- Semantic (status) ------------------------------------ */
  --success: #2e7d32;
  --success-bg: #e8f5e9;
  --success-border: #a5d6a7;

  --warning: #ed6c02;
  --warning-bg: #fff4e5;
  --warning-border: #ffcc80;

  --danger: #c62828;
  --danger-bg: #fdecea;
  --danger-border: #ef9a9a;

  --info: #0277bd;
  --info-bg: #e3f2fd;
  --info-border: #90caf9;

  /* --- Links ------------------------------------------------
     #3396cf measured 3.28:1 on white, so every inline link in the legal
     pages and the account views sat below the AA floor for body text.
     Darkened to 5.5:1; the hover stays darker still. */
  --link: #1f6f9e;
  --link-hover: #1f5675;

  /* --- Typography ------------------------------------------- */
  --font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — rem only, mobile-first */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */

  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing scale (8px base) ----------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* --- Radius ----------------------------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shared public-page measure, aligned with the homepage. */
  --layout-width: 1280px;
  --layout-gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Shadow ----------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);

  /* --- Focus ring ------------------------------------------- */
  --ring: 0 0 0 3px rgba(204, 171, 86, 0.35);

  /* --- Motion ----------------------------------------------- */
  --transition: 160ms ease;
  --transition-slow: 280ms ease;

  /* --- Gradient (kept for hero/section overlays) ------------ */
  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  /* --- Z-index layers --------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 300;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  /* --- Breakpoints (reference — use in @media min-width) ----
     sm 480px   md 768px   lg 1024px   xl 1280px
     Mobile styles are the default; layer up with min-width.
     (CSS custom properties can't be used inside @media.)
  ------------------------------------------------------------ */

  /* ============================================================
     2. GREYS AND ALERT TINTS WITHOUT A MODERN EQUIVALENT

     These began life in the legacy alias block but are real values, not
     aliases — nothing in section 1 expresses them — so they are tokens in
     their own right.
     ============================================================ */
  --complementary-dark: #4d4a4b;
  --neutral-gray: #a8a8a8;

  /* ------------------------------------------------------------
     Neutral scale and a few named extras.

     These are not new colours — they are the literals that were
     already used most often across the stylesheets, given names so
     the palette can be changed in one place instead of hunting
     hex codes. Values are unchanged from what was there.
     ------------------------------------------------------------ */
  --grey-900: #333;
  --grey-700: #666;
  --grey-600: #6c757d;
  --grey-500: #aaa;
  --grey-400: #ccc;
  --grey-300: #ddd;
  --grey-200: #e0e0e0;
  --grey-150: #e9ecef;
  --grey-100: #f9f9f9;
  --grey-50: #f8f9fa;
  --black: #000;

  /* Accent golds and oranges that sit outside the brand ramp:
     --gold-alt is the metallic gold used on documents, and the two
     oranges belong to the Orange telecom partnership pages. */
  --gold-alt: #d4af37;
  --orange: #ff7f00;
  --orange-dark: #ff6100;
  --green-alt: #28a745;
  --alert-secondary-bg: #d8d9db;
  --alert-primary-border: #d1c7a3;
  --alert-secondary-border: #b2b5b8;

  /* ============================================================
     3. REMAINING LEGACY ALIASES

     The other ~25 aliases are gone: all 299 references across the main-site
     stylesheets were rewritten to the modern names. These two survive because
     consumers outside those stylesheets still use them —

       --primary-color : seller/403.php, seller/404.php and others, plus the
                         styles resources/js/cookie-consent.js injects at runtime
       --white         : the same seller pages

     seller/ is out of scope for this refactor and never loads base.css anyway,
     so these are also what its var() references resolve to on the main site.
     Retire them when seller/ is brought in.

     NOTE for anyone re-adding aliases: the old --spacing-* scale was OFF BY ONE
     against --space-* (--spacing-sm was --space-4, not --space-2). The
     migration substituted by value using the alias table, never by name.
     ============================================================ */
  --primary-color: var(--brand-gold);
  --white: var(--surface);
}

/* ============================================================
   3. MODERN RESET
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  background-color: var(--surface-alt);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-top: 70px;           /* clears the fixed navbar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   4. BASE TYPOGRAPHY — unified scale via tokens
   Page-level CSS / main.css can override, but these defaults
   establish the rhythm for every page.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--text);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}

h1 { font-size: var(--fs-2xl); }   /* 36px mobile; main.css scales up on wide viewports */
h2 { font-size: var(--fs-xl); }    /* 28px */
h3 { font-size: var(--fs-lg); }    /* 22px */
h4 { font-size: var(--fs-md); }    /* 18px */
h5 { font-size: var(--fs-base); }  /* 16px */
h6 { font-size: var(--fs-sm); }    /* 14px */

p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}

small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-semibold); }

/* ============================================================
   5. BASE ELEMENTS
   ============================================================ */
img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

/* :where() contributes no specificity, so this stays an element-level rule.
   As `a:visited` it outranked every component that sets its own colour with a
   single class — one brand on the shop page rendered blue and the rest black,
   for no reason other than that it had been clicked once. Plain content links
   still get the visited colour; cards, chips and tiles keep theirs. */
a:where(:visited) { color: var(--link-hover); }
a:hover   { color: var(--brand-gold); }

ul, ol { list-style: none; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: transparent;
}

button { cursor: pointer; }

button:disabled,
[disabled] {
  cursor: not-allowed;
}

/* Accessibility — keyboard focus ring (hidden for mouse clicks).

   No border-radius here. It used to force --radius-sm onto whatever took
   focus, so a pill-shaped control changed shape while it was focused and the
   ring around the shop's search field was drawn as a small rounded rectangle
   inside a fully rounded white pill. A focus ring follows the element; it does
   not reshape it. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Text selection, in the brand's colours rather than the browser's blue. */
::selection {
  background: var(--brand-gold);
  color: var(--brand-black);
}

/* Skip-to-content link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-black);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--text-inverse);
}

/* Visually-hidden helper for screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect user motion preferences */
@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;
  }
}