/* ============================================================
   VARIABLES — the only file a rebrand should ever need to touch.
   ============================================================
   Every colour, font and spacing value the rest of the CSS uses
   comes from here. No other CSS file in this project should
   contain a hard-coded colour or font — always reference var(--...).

   This is Cheapwebsitestore's OWN site (the store itself, not one
   of the templates it sells) — dark navy background with a bright
   orange brand colour, matching the approved Figma designs.
   ============================================================ */

:root {

  /* ---- Brand colours ---- */
  --color-primary: #f15a24;        /* signature orange — CTAs, links, brand mark */
  --color-primary-hover: #ff7240;  /* lighter orange for hover states */
  --color-primary-dark: #d14812;   /* pressed / active state */

  /* ---- Package/accent colours (used for the 4-tier package cards,
     the instant quote tool, and anywhere else a second/third/fourth
     accent is needed alongside the primary orange) ---- */
  --color-accent-teal: #2dd4d0;     /* "Template + Branding" package */
  --color-accent-purple: #9b6bf0;   /* "Custom Order" package */
  --color-accent-green: #34d399;    /* "Service & Support" package + discount text */

  /* ---- Backgrounds (dark theme throughout) ---- */
  --color-bg: #0a1420;              /* page background */
  --color-bg-alt: #0d1b2a;          /* alternating section background */
  --color-bg-elevated: #101f30;     /* cards, inputs, panels sitting above the page bg */
  --color-bg-elevated-2: #14263a;   /* a step brighter than --color-bg-elevated, for nested panels */
  --color-bg-dark: #060c14;         /* footer / darkest sections */

  /* ---- Text ---- */
  --color-text: #f5f7fa;            /* headings, primary body text on dark bg */
  --color-text-muted: #8fa0b3;      /* secondary/supporting text */
  --color-text-faint: #5b6b7d;      /* least prominent text (fine print) */
  --color-text-on-primary: #ffffff; /* text sitting on an orange button */

  /* ---- Borders ---- */
  --color-border: #1d2e42;          /* default card/input border */
  --color-border-light: #2a3d54;    /* slightly brighter border, for hover states */

  /* ---- Status ---- */
  --color-success: #34d399;
  --color-error: #f87171;

  /* ---- Fonts ---- */
  --font-heading: 'Anton', 'Arial Narrow', sans-serif;   /* big bold display headings */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Radius ---- */
  --radius: 10px;         /* cards, inputs, images */
  --radius-sm: 6px;       /* small tags/badges */
  --radius-pill: 999px;   /* buttons */

  /* ---- Spacing scale ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-section: 6rem;

  /* ---- Layout ---- */
  --container-width: 1280px;
  --header-height: 76px;

  /* ---- Motion ---- */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-glow-primary: 0 0 0 3px rgba(241, 90, 36, 0.18);
}

/* ============================================================
   ALTERNATE PALETTES (commented out)
   ------------------------------------------------------------
   Swap the active :root block above for one of these to reskin
   the whole site without touching any other file. Only the
   colour tokens are shown — copy the rest of the block above
   unchanged.
   ============================================================ */

/*
   -- "Electric Blue" alternate --
  --color-primary: #2e6bff;
  --color-primary-hover: #5a89ff;
  --color-primary-dark: #1c4fd6;
  --color-accent-teal: #22d3ee;
  --color-accent-purple: #a78bfa;
  --color-accent-green: #34d399;
*/

/*
   -- "Signal Green" alternate --
  --color-primary: #2ecc71;
  --color-primary-hover: #58d98a;
  --color-primary-dark: #21a85a;
  --color-accent-teal: #22d3ee;
  --color-accent-purple: #9b6bf0;
  --color-accent-green: #f15a24;
*/