/**
 * Pro Safe Australia — Design Tokens
 * Source of truth for landing page + any future web work.
 * Primary CTA: phone call. Secondary: email.
 */

:root {
  /* ── Colour ─────────────────────────────────────────── */
  /* Core palette extracted from business card + flyer */
  --psa-black:        #0A0A0A;
  --psa-black-soft:   #141414;
  --psa-black-elev:   #1C1C1C;
  --psa-charcoal:     #24221B;

  --psa-gold:         #E8A817;   /* primary brand / safety yellow-gold */
  --psa-gold-bright:  #F0B82A;   /* hover / highlight */
  --psa-gold-deep:    #C48E0F;   /* pressed / shadow */
  --psa-gold-muted:   #DFB02B;   /* secondary gold from flyer sampling */

  --psa-white:        #FFFFFF;
  --psa-off-white:    #F7F5F0;
  --psa-gray-100:     #F0F0F0;
  --psa-gray-300:     #C8C8C8;
  --psa-gray-500:     #6B6B6B;
  --psa-gray-600:     #5A5A5A;
  --psa-gray-700:     #3D3D3D;

  /* Semantic */
  --psa-bg:           var(--psa-black);
  --psa-bg-alt:       var(--psa-black-soft);
  --psa-surface:      var(--psa-black-elev);
  --psa-text:         var(--psa-white);
  --psa-text-muted:   var(--psa-gray-300);
  --psa-text-dim:     var(--psa-gray-500);
  --psa-accent:       var(--psa-gold);
  --psa-accent-hover: var(--psa-gold-bright);
  --psa-border:       rgba(232, 168, 23, 0.35);
  --psa-border-soft:  rgba(255, 255, 255, 0.08);

  /* ── Typography ─────────────────────────────────────── */
  /* Display = industrial condensed impact (headlines, logo feel)
     Body    = clean readable sans for copy + forms */
  /* Self-hosted-friendly stacks (no external font CDN required) */
  --psa-font-display: "Arial Black", "Helvetica Neue", Impact, Arial, sans-serif;
  --psa-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --psa-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

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

  --psa-fs-xs:   0.75rem;    /* 12 */
  --psa-fs-sm:   0.875rem;   /* 14 */
  --psa-fs-base: 1rem;       /* 16 */
  --psa-fs-md:   1.125rem;   /* 18 */
  --psa-fs-lg:   1.25rem;    /* 20 */
  --psa-fs-xl:   1.5rem;     /* 24 */
  --psa-fs-2xl:  2rem;       /* 32 */
  --psa-fs-3xl:  2.5rem;     /* 40 */
  --psa-fs-4xl:  3.25rem;    /* 52 */
  --psa-fs-5xl:  4rem;       /* 64 */
  --psa-fs-hero: clamp(2.5rem, 6vw, 4.5rem);

  --psa-lh-tight:  1.05;
  --psa-lh-snug:   1.2;
  --psa-lh-normal: 1.55;
  --psa-ls-tight:  -0.02em;
  --psa-ls-wide:   0.08em;
  --psa-ls-wider:  0.14em;
  --psa-ls-stamp:  0.2em;    /* product strip / footer badges */

  /* ── Spacing ────────────────────────────────────────── */
  --psa-space-1:  0.25rem;
  --psa-space-2:  0.5rem;
  --psa-space-3:  0.75rem;
  --psa-space-4:  1rem;
  --psa-space-5:  1.5rem;
  --psa-space-6:  2rem;
  --psa-space-7:  3rem;
  --psa-space-8:  4rem;
  --psa-space-9:  6rem;
  --psa-space-10: 8rem;

  --psa-section-y: clamp(3.5rem, 8vw, 6rem);
  --psa-container: 72rem;
  --psa-gutter:    clamp(1rem, 4vw, 2rem);

  /* ── Radii & elevation ──────────────────────────────── */
  --psa-radius-sm: 4px;
  --psa-radius:    8px;
  --psa-radius-lg: 12px;
  --psa-radius-pill: 999px;

  --psa-shadow-cta: 0 8px 24px rgba(232, 168, 23, 0.35);
  --psa-shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* ── Motion ─────────────────────────────────────────── */
  --psa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --psa-dur-fast: 150ms;
  --psa-dur:      220ms;

  /* ── Brand content (single place for landing page) ─── */
  --psa-phone-display: "0418 582 751";
  --psa-phone-tel:     "tel:+61418582751";
  --psa-email:         "prosafeqld@gmail.com";
  --psa-email-mailto:  "mailto:prosafeqld@gmail.com";
  --psa-website:       "www.prosafeaustralia.com.au";
  --psa-url:           "https://www.prosafeaustralia.com.au";
  --psa-director:      "Roy Main";
  --psa-tagline:       "Express Safety Supplies and Installation";
  --psa-region-line:   "Proudly servicing all of Queensland";
}

/* Utility helpers used by templates */
.psa-container {
  width: min(100% - 2 * var(--psa-gutter), var(--psa-container));
  margin-inline: auto;
}

.psa-eyebrow {
  font-family: var(--psa-font-body);
  font-size: var(--psa-fs-sm);
  font-weight: var(--psa-fw-bold);
  letter-spacing: var(--psa-ls-wide);
  text-transform: uppercase;
  color: var(--psa-gold);
}

.psa-display {
  font-family: var(--psa-font-display);
  font-weight: var(--psa-fw-bold);
  line-height: var(--psa-lh-tight);
  letter-spacing: var(--psa-ls-tight);
  text-transform: uppercase;
  color: var(--psa-text);
}

.psa-body {
  font-family: var(--psa-font-body);
  font-size: var(--psa-fs-base);
  line-height: var(--psa-lh-normal);
  color: var(--psa-text-muted);
}

/* Hazard stripe — brand motif from flyer footer */
.psa-hazard-stripe {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--psa-gold) 0 12px,
    var(--psa-black) 12px 24px
  );
}

.psa-gold-bar {
  height: 6px;
  background: var(--psa-gold);
}