/* ==========================================================================
   Design tokens - subset of the main project's --pc-* system
   --------------------------------------------------------------------------
   Only the tokens this visualization actually consumes are kept. Names and
   values are verbatim from the main theme, so when this widget is embedded in
   the consultancy site THIS FILE CAN SIMPLY BE DROPPED: the parent already
   defines every token below, and land-pooling.css keeps working unchanged.

   Deliberately NOT copied (nothing here uses them):
     - the three non-planning discipline colours (architecture / engineering /
       survey) - this is a planning tool, so only the blue pair is kept
     - display-1/2/3, h1, h2, --pc-stat, --pc-measure*  (no long-form prose or
       hero type in a toolbar-and-canvas UI)
     - --pc-space-0, 6, 7, 8 and --pc-section-y  (widget spacing tops out at 64px)
     - --pc-container-max / -narrow  (the viewport is full-bleed)
     - --pc-radius-pill, --pc-shadow-md, --pc-leading-relaxed
     - the header/drawer/modal/cursor z-indices (site chrome, not this widget)

   Poppins is referenced but NOT fetched here: no <link> is added, so the
   standalone page falls back to the system stack and stays offline-capable,
   while inside the site it inherits the real Poppins the parent already loads.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------ */

  --pc-ink:         #062a45;   /* 14.74:1 on white - primary brand surface */
  --pc-amber:       #fab700;   /*  1.77:1 on white - BLOCK COLOUR ONLY     */
  --pc-amber-dark:  #e0a300;   /* amber hover                              */
  --pc-on-ink:      #ffffff;   /* 14.74:1 on --pc-ink                      */
  --pc-on-accent:   #062a45;   /*  8.31:1 on --pc-amber                    */
  --pc-accent-text: #8a6400;   /*  5.42:1 - amber as TEXT                  */

  /* --- Discipline: planning -------------------------------------------- */
  /* The blue of the Pancha-Buddha set, used here as the tool's semantic
     accent (active tool, selected object). Never the only cue for meaning -
     every use is paired with a label or an outline. */

  --pc-d-planning:      #008cd1;   /* rules, chips, fills          */
  --pc-d-planning-text: #005b87;   /* 7.38:1 on white - as text    */

  /* --- Neutral scale ---------------------------------------------------- */

  --pc-n-50:  #f7f8fa;   /*  1.06:1 - page tint           */
  --pc-n-100: #eef0f4;   /*  1.14:1 - section tint        */
  --pc-n-200: #dfe3ea;   /*  1.29:1 - hairlines, dividers */
  --pc-n-300: #c6ccd8;   /*  1.61:1 - borders             */
  --pc-n-500: #6f7480;   /*  4.68:1 - de-emphasised label */
  --pc-n-600: #5f6470;   /*  5.93:1 - body copy           */
  --pc-n-800: #2c313b;   /* 13.05:1 - headings on white   */

  /* --- Semantic text ---------------------------------------------------- */

  --pc-body:  #5f6470;   /* = n-600 */
  --pc-muted: #6f7480;   /* = n-500 */

  /* --- Typography ------------------------------------------------------- */

  --pc-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Coordinates, dimensions and object counts. Tabular by intent. */
  --pc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --pc-weight-regular:  400;
  --pc-weight-medium:   500;
  --pc-weight-semibold: 600;

  --pc-h3:        clamp(18px, 0.6vw + 14px, 22px);
  --pc-text-lg:   clamp(17px, 0.4vw + 15px, 19px);
  --pc-text-base: 16px;
  --pc-text-sm:   13px;
  --pc-text-xs:   12px;

  --pc-text-label:       12px;
  --pc-tracking-label:   0.14em;
  --pc-tracking-tight:  -0.015em;

  --pc-leading-tight: 1.15;
  --pc-leading-snug:  1.3;
  --pc-leading-body:  1.65;

  /* --- Spacing (8px base) ----------------------------------------------- */

  --pc-space-1: 8px;
  --pc-space-2: 16px;
  --pc-space-3: 24px;
  --pc-space-4: 40px;
  --pc-space-5: 64px;

  --pc-gutter: clamp(16px, 4vw, 32px);

  /* --- Breakpoints ------------------------------------------------------ */
  /* DOCUMENTATION TOKENS - a custom property cannot be used inside a media
     query, so land-pooling.css hardcodes these same numbers. Changing one
     here means changing it there too. (This widget queries them as
     max-width because it restyles a single component rather than a page
     layout; the values themselves are the shared ones.) */

  --pc-bp-sm:  480px;
  --pc-bp-md:  768px;
  --pc-bp-lg: 1024px;

  /* --- Borders and radii ------------------------------------------------ */

  --pc-border-hair: 1px;
  --pc-border-thick: 2px;
  --pc-line:        rgba(34, 34, 34, 0.09);
  --pc-line-strong: rgba(34, 34, 34, 0.18);

  --pc-radius:    2px;   /* a drawing edge, not consumer SaaS */
  --pc-radius-md: 4px;

  /* --- Elevation -------------------------------------------------------- */

  --pc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);

  /* --- Motion ----------------------------------------------------------- */

  --pc-duration-fast:   150ms;
  --pc-duration-normal: 200ms;
  --pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Focus ------------------------------------------------------------ */

  --pc-focus-width:  2px;
  --pc-focus-offset: 3px;
  --pc-focus-color:  #fab700;

  --pc-tap-min: 44px;   /* WCAG 2.5.5 / 2.5.8 */

  /* --- Z-index ----------------------------------------------------------- */
  /* Local to the widget: both sit inside .stage, far below the site chrome. */

  --pc-z-base:   0;
  --pc-z-raised: 2;
}