/* ==========================================================================
   Pawgenda brand tokens: THE single source of the brand.
   Everything else (app.css, scoped component CSS, emails via BrandTokens.cs)
   is built from these. Never write a hex value outside this file.

   Per-business theming overrides ONLY --pg-brand (+ its derived shades and
   --pg-on-brand). In client portals that's the business's colour; in the owner
   back office and on the platform it stays Sea. Buoy, Sand, Ink, Slate, Mist and
   Line never change.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* ---- Palette ---- */
  --pg-sea: #164E7A;      /* primary */
  --pg-buoy: #B83A26;     /* the ONE main action per screen */
  --pg-sand: #F3E6CC;     /* warm panels */
  --pg-ink: #10263A;      /* text */
  --pg-slate: #4A5C6B;    /* secondary text */
  --pg-mist: #F7F9FB;     /* page tint */
  --pg-line: #E2E6EA;     /* borders */
  --pg-white: #FFFFFF;

  /* Brand slot: Sea by default, the business's colour in its client portal. */
  --pg-brand: var(--pg-sea);
  --pg-on-brand: var(--pg-white);
  --pg-brand-strong: color-mix(in srgb, var(--pg-brand) 82%, black);
  --pg-brand-tint: color-mix(in srgb, var(--pg-brand) 9%, white);
  --pg-brand-line: color-mix(in srgb, var(--pg-brand) 28%, white);

  --pg-on-buoy: var(--pg-white);
  --pg-buoy-strong: color-mix(in srgb, var(--pg-buoy) 85%, black);
  --pg-sand-strong: color-mix(in srgb, var(--pg-sand) 70%, var(--pg-ink) 8%);

  /* Feedback (derived, not new brand colours) */
  --pg-danger: var(--pg-buoy);
  --pg-danger-tint: color-mix(in srgb, var(--pg-buoy) 8%, white);
  --pg-success: color-mix(in srgb, #1F7A4D 100%, transparent);
  --pg-success-tint: color-mix(in srgb, #1F7A4D 9%, white);

  /* ---- Type ---- */
  --pg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pg-body-size: 16px;
  --pg-body-leading: 1.55;
  --pg-heading-weight: 800;
  --pg-heading-tracking: -0.025em;   /* -2% to -3% */
  --pg-h1: 32px;
  --pg-h2: 24px;
  --pg-h3: 20px;
  --pg-small: 14px;
  --pg-tiny: 13px;

  /* ---- Shape ---- */
  --pg-radius-control: 12px;   /* buttons, inputs */
  --pg-radius-card: 16px;
  --pg-radius-pill: 999px;

  /* ---- Space: 8px grid ---- */
  --pg-1: 8px;
  --pg-2: 16px;
  --pg-3: 24px;
  --pg-4: 32px;
  --pg-5: 40px;
  --pg-6: 48px;
  --pg-gutter: 16px;           /* mobile gutters */
  --pg-tap: 44px;              /* minimum tap target */

  /* ---- Icons ---- */
  --pg-icon-stroke: 1.8;

  /* ---- Elevation (quiet) ---- */
  --pg-shadow-1: 0 1px 2px rgba(16, 38, 58, 0.06), 0 1px 3px rgba(16, 38, 58, 0.08);
  --pg-shadow-2: 0 8px 24px rgba(16, 38, 58, 0.12);

  /* ---- Layout ---- */
  --pg-phone-max: 480px;       /* client + walker apps are phone-only layouts */
  --pg-content-max: 1200px;
}