/* UpHex local-business pages (/pack, /pack/optimize) · design tokens
 * Scoped to [data-brand="pack"] (the body of layouts/base_marketing) so nothing else on uphex.com
 * inherits them. Brand anchors are the locked UpHex refresh palette as exact hex values; every
 * other colour is mixed from those anchors, so no new colour can enter the pages from here.
 * Hallmark · theme: UpHex brand (locked) · axes: light / geometric-sans + editorial serif accent / cool (~257°)
 */
[data-brand="pack"] {
  /* ------------------------------------------------------------ brand anchors (locked) */
  --color-uphex-blue:  #2383FF; /* logo blue: routes, pins, display accents          */
  --color-action-blue: #2E90FA; /* filled primary buttons (large text only)          */
  --color-blue-deep:   #0464E0; /* small text on blue, focus ring, hover             */
  --color-navy:        #262938; /* ink and dark sections                            */
  --color-canvas:      #F9F7F3; /* warm page canvas                                 */
  --color-white:       #FFFFFF;
  --color-blue-soft:   #EFF8FF;
  --color-hairline:    #EAECF0;
  --color-grey:        #667085;
  --color-teal:        #2A8682; /* readiness dots only; text uses --color-teal-ink   */
  --color-error:       #B42318;

  /* ------------------------------------------------------------ roles */
  --color-blue:        var(--color-uphex-blue);
  --color-action:      var(--color-action-blue);
  --color-surface:     var(--color-white);
  --color-soft-blue:   var(--color-blue-soft);
  --color-rule:        var(--color-hairline);
  --color-rule-strong: color-mix(in oklab, var(--color-grey) 30%, var(--color-white));
  --color-field-border: var(--color-grey); /* input boundaries owe 3:1, the hairline doesn't */
  --color-muted:       var(--color-grey);
  --color-navy-deep:   color-mix(in oklab, var(--color-navy) 82%, black);
  --color-navy-raised: color-mix(in oklab, var(--color-navy) 90%, var(--color-white));
  --color-on-navy:     var(--color-canvas);
  --color-on-navy-2:   color-mix(in oklab, var(--color-canvas) 74%, var(--color-navy));
  --color-blue-light:  color-mix(in oklab, var(--color-uphex-blue) 55%, var(--color-white));
  --color-teal-ink:    color-mix(in oklab, var(--color-teal) 78%, black);
  --color-focus:       var(--color-blue-deep);
  --color-focus-on-navy: var(--color-canvas);
  --color-scrim:       color-mix(in oklab, var(--color-navy-deep) 62%, transparent);

  /* ------------------------------------------------------------ type */
  --font-display:   "Manrope", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "Manrope", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-editorial: "Fraunces", ui-serif, Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-action: 1.1875rem; /* white on #2E90FA is 3.24:1, so filled labels stay at bold large-text size */
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(1.875rem, 3vw + 0.75rem, 2.75rem);
  --text-3xl: clamp(2.25rem, 4.5vw + 0.75rem, 4rem);
  --text-display: clamp(2.75rem, 7vw + 0.5rem, 6.25rem);
  --text-mega: clamp(4rem, 14vw, 12rem);

  /* ------------------------------------------------------------ space (4pt) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ------------------------------------------------------------ shape */
  --radius-field: 10px;
  --radius-card: 16px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-focus: 3px;
  --touch-target: 44px;

  /* ------------------------------------------------------------ motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* ------------------------------------------------------------ depth */
  --shadow-soft: 0 1px 3px color-mix(in oklab, var(--color-navy) 10%, transparent);
  --shadow-lift: 0 24px 60px -28px color-mix(in oklab, var(--color-navy) 45%, transparent);
  --shadow-glow: 0 0 0 6px color-mix(in oklab, var(--color-uphex-blue) 18%, transparent);

  --shell: 1240px;
}