/* UpHex hybrid kit · portable token export
 * kit source of truth: pack-design/uphex-refresh/README.md
 * axes: warm canvas / editorial-serif + geometric-sans / UpHex action blue
 * Source of truth for the Base onboarding and dashboard experience.
 * Copper is illustration-only: it never drives a button, link, focus ring, or
 * status colour. Dark UI chrome is navy, not forest.
 */

:root {
  /* ---------------------------------------------------------------- colour */
  --color-paper:        #F9F7F3;  /* warm canvas — page ground            */
  --color-paper-2:      #F1EDE6;  /* sunken / hover warm surface          */
  --color-surface:      #FFFFFF;  /* forms and content surfaces           */
  --color-ink:          #262938;  /* ink navy — primary text              */
  --color-ink-2:        #475467;  /* secondary text                       */
  --color-muted:        #667085;  /* supporting copy                      */
  --color-rule:         #D0D5DD;  /* field boundaries                     */
  --color-rule-2:       #EAECF0;  /* kit border — quiet dividers          */
  --color-accent:       #2E90FA;  /* action blue — primary fill           */
  --color-accent-deep:  #0464E0;  /* deep blue — hover and link text      */
  --color-accent-wash:  #EFF8FF;  /* soft blue — selected / quiet emphasis*/
  --color-accent-ink:   #FFFFFF;  /* text on action blue                  */
  --color-signal:       #1F6F6B;  /* readiness text/fill (teal, AA)       */
  --color-signal-soft:  #2A8682;  /* supporting teal marker               */
  --color-alpine:       #2383FF;  /* UpHex blue — territory / information */
  --color-forest:       #262938;  /* navy dark chrome                     */
  --color-forest-soft:  #343849;  /* raised navy surface                  */
  --color-on-forest:    #F9F7F3;  /* warm canvas text on navy             */
  --color-focus:        #2E90FA;  /* keyboard focus ring                  */
  --color-warning:      #B54708;
  --color-warning-wash: #FFFAEB;
  --color-error:        #B42318;  /* actionable failure text              */
  --color-success:      #1F6F6B;  /* confirmed success text               */
  --color-scrim:        rgba(38, 41, 56, 0.45); /* modal backdrop         */
  --color-google-blue:  oklch(63.039% 0.180027 259.956);
  --color-google-red:   oklch(62.573% 0.205841 29.077);
  --color-google-yellow: oklch(83.044% 0.169810 83.993);
  --color-google-green: oklch(64.755% 0.160277 148.495);

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

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.1875rem;
  --text-3xl:  2.75rem;
  --text-display:   clamp(2.125rem, 6.5vw + 0.5rem, 3.25rem);
  --text-display-s: clamp(1.75rem, 5vw + 0.5rem, 2.5rem);

  /* ------------------------------------------------------------------ space */
  --space-3xs: 0.25rem;
  --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;

  /* ----------------------------------------------------------------- shape */
  --radius-card:  10px;
  --radius-field: 6px;
  --radius-panel: 28px;
  --radius-pill:  999px;
  --rule-hair:    1px;

  /* ---------------------------------------------------------------- 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;
  --dur-route: 600ms;

  /* ---------------------------------------------------------------- layers */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;

  /* --------------------------------------------------------------- shadows */
  --shadow-whisper: 0 1px 2px rgba(38, 41, 56, 0.06);
  --shadow-soft:    0 1px 3px rgba(38, 41, 56, 0.10);
  --shadow-lift:    0 12px 30px -18px rgba(38, 41, 56, 0.28);

  /* ------------------------------------------- wasted-spend report (sc-88439)
     Night surfaces and UpHex-blue light for /funnel/audit + /funnel/report,
     converted from the approved Living Town prototype. Named so no rule
     inlines a colour. */
  --color-night:            #1B1D29;  /* night surface (deeper than navy)   */
  --color-night-raised:     #313445;  /* raised on night                    */
  --color-on-night-2:       #B2B7C5;  /* secondary text on night            */
  --color-on-night-accent:  #80C3FF;  /* light blue text on night           */
  --color-accent-wash-2:    #D1E9FF;  /* selected wash / unproven hatch     */
  --color-line-on-night:    rgba(255, 255, 255, 0.08);
  --color-fill-on-night:    rgba(255, 255, 255, 0.06);
  --color-alpine-tint:      rgba(35, 131, 255, 0.14);
  --color-alpine-haze:      rgba(35, 131, 255, 0.25);
  --color-alpine-glow:      rgba(35, 131, 255, 0.8);
  --color-strike:           rgba(35, 131, 255, 0.9);
  --color-night-fade:       rgba(27, 29, 41, 0.55);
  --color-night-clear:      rgba(27, 29, 41, 0.15);
  --color-line-on-night-strong: rgba(255, 255, 255, 0.22); /* ghost control edge on navy (sc-88652) */
  --shadow-night-lift:      0 24px 60px -28px rgba(38, 41, 56, 0.45);
}