/* Permit Nav design tokens.
   Mirrored 1:1 from the Figma "Permit Nav" variable collection
   (file HmGCdjPh6s21weltIkk86D, read via get_variable_defs on 71:2, 78:2, 43:51, 52:439, 43:78, 45:385, 48:501).
   Figma names kept; slashes become dashes; prefix --pn-.
   Three values marked "contract" were not exposed by get_variable_defs (no bound usage found) and come from the build contract. */
:root {
  /* color / background */
  --pn-color-background-canvas: #0b0e14;
  --pn-color-background-surface: #141921;
  --pn-color-background-raised: #1c2330;
  --pn-color-background-raisedHover: #26303f; /* 2026-10-10: hover lift for raised fills, stays in the blue family (frostHover went flat grey) */

  /* color / text */
  --pn-color-text-primary: #f2f0e9;
  --pn-color-text-secondary: #b8bdbb;
  --pn-color-text-muted: #8d9795;
  --pn-color-text-onAccent: #ffffff;

  /* color / accent */
  --pn-color-accent-primary: #46c88a;
  --pn-color-accent-fill: #007a55;
  --pn-color-accent-hover: #006b4b;
  --pn-color-accent-tint: rgba(70, 200, 138, 0.16); /* contract */
  /* brand green: fixed, never follows data-accent (owner 2026-10-14: the illustrations and the workflow motion keep the brand colour under any accent theme) */
  --pn-color-brand-green: #46c88a;
  --pn-color-brand-greenFill: #007a55;
  --pn-color-brand-greenTint: rgba(70, 200, 138, 0.16);

  /* color / focus */
  --pn-color-focus: #f2f0e9;          /* 2026-10-13: focus is neutral (off-white ring); green is reserved for approved/verified */
  --pn-color-focus-onLight: #0b0e14;  /* ring on off-white or lime surfaces */

  /* color / surface (frosted secondary buttons; #F2F0E9 at 14 / 22 / 8 %) */
  --pn-color-surface-frost: rgba(242, 240, 233, 0.14);
  --pn-color-surface-frostHover: rgba(242, 240, 233, 0.22);
  --pn-color-surface-frostDisabled: rgba(242, 240, 233, 0.08);

  /* color / border */
  --pn-color-border-decorative: #2b3442;
  --pn-color-border-control: #66768a;

  /* color / status */
  --pn-color-status-success: #97bba3;
  --pn-color-status-info: #8eb1c1;
  --pn-color-status-error: #e69786;

  /* space */
  --pn-space-4: 4px;
  --pn-space-8: 8px;
  --pn-space-12: 12px;
  --pn-space-16: 16px;
  --pn-space-24: 24px;
  --pn-space-32: 32px;
  --pn-space-48: 48px;
  --pn-space-64: 64px;
  --pn-space-96: 96px;
  --pn-space-128: 128px;

  /* radius */
  --pn-radius-control: 4px;
  --pn-radius-card: 8px;
  --pn-radius-card-l: 16px; /* 2026-10-10: large block cards (band CTAs) */
  --pn-radius-pill: 999px;

  /* layout */
  --pn-layout-maxWidth: 1280px; /* contract */
  --pn-layout-gutter: 64px;     /* contract */
  --pn-layout-margin-1440: 80px;
  --pn-layout-gutter-mobile: 20px;

  /* text styles (Figma text styles; letter-spacing % converted to em) */
  --pn-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* owner 2026-10-13: body face trial (Source Sans 3, Public Sans tried before) */
  --pn-font-mono: var(--pn-font-sans); /* owner 2026-10-13: mono removed from the whole site; every former mono use now sets in the body face */
  --pn-font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* owner 2026-10-13: headline face (chosen from a 9-face specimen) */

  --pn-type-display-hero: 700 52px/1.1 var(--pn-font-display);       /* ls -2% */
  --pn-type-heading-section: 700 40px/1.15 var(--pn-font-display);   /* ls -2% */
  --pn-type-heading-sub: 700 26px/1.2 var(--pn-font-display);        /* ls -1% */
  --pn-type-text-lead: 300 22px/1.5 var(--pn-font-sans);
  --pn-type-text-body: 300 18px/1.6 var(--pn-font-sans);
  --pn-type-text-body-m: 300 16px/1.6 var(--pn-font-sans);
  --pn-type-ui-label: 400 16px/1.3 var(--pn-font-sans);
  --pn-type-ui-label-l: 400 18px/1.3 var(--pn-font-sans);
  --pn-type-ui-label-s: 400 14px/1.3 var(--pn-font-sans);
  --pn-type-ui-eyebrow-size: 16px;                                  /* ONE size for every eyebrow, upper or sentence case (owner 2026-10-29: 12 -> 14 -> 16, "still all really small") */
  --pn-type-ui-eyebrow: 500 var(--pn-type-ui-eyebrow-size)/1.4 var(--pn-font-sans); /* uppercase, ls +8% (2026-10-13) */
  --pn-type-caption-technical: 400 13px/1.4 var(--pn-font-sans);
  --pn-type-brand-wordmark: 700 20px/1.2 var(--pn-font-display); /* owner 2026-10-29: "Permit Nav" title case in the headline face (was Figtree 600 18 caps); matches the live lockup */

  /* non-token prototype constants */
  --pn-header-height: 72px;
  --pn-blur-frost: 16px;   /* "blur is not tokenised" per the Button component description */
  --pn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* feature tile gradients (2026-10-10) */
  /* owner 2026-10-10 v2: one dark tile, colour on the glyph (Raycast AI Chat ref) */
  --pn-tile-dark: linear-gradient(180deg, #1a2029, #0b0e14);
  --pn-tile-lookup: #3ddc97;   /* Parcel Lookup, brand green */
  --pn-tile-nav: #5aa9ff;      /* Permit Nav, blue */
  --pn-tile-checker: #ffb14a;  /* Drawing Checker, amber */
  --pn-tile-tracker: #b08cff;  /* Permit Tracker, violet */
  --pn-tile-verifier: #4fd8e8; /* Rule Verifier, teal */
}

/* Text style classes */
.t-display-hero { font: var(--pn-type-display-hero); letter-spacing: -0.025em; }
.t-heading-section { font: var(--pn-type-heading-section); letter-spacing: -0.025em; }
.t-heading-sub { font: var(--pn-type-heading-sub); letter-spacing: -0.015em; }
.t-lead { font: var(--pn-type-text-lead); }
.t-body { font: var(--pn-type-text-body); }
.t-body-m { font: var(--pn-type-text-body-m); }
.t-label { font: var(--pn-type-ui-label); }
.t-label-l { font: var(--pn-type-ui-label-l); }
.t-label-s { font: var(--pn-type-ui-label-s); }
.t-eyebrow { font: var(--pn-type-ui-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; }
.t-caption { font: var(--pn-type-caption-technical); }
.t-wordmark { font: var(--pn-type-brand-wordmark); }

/* Accent exploration 2026-10-13 (owner asked to see teal-cyan): ?accent=teal | lime | neutral on any page; remembered until ?accent=green */
:root[data-accent="teal"] {
  --pn-color-accent-primary: #2ee6c8;
  --pn-color-accent-fill: #0e9b86;
  --pn-color-accent-hover: #0c8674;
  --pn-color-accent-tint: rgba(46, 230, 200, 0.16);
}

:root[data-accent="lime"] {
  --pn-color-accent-primary: #c6ff4d;
  --pn-color-accent-fill: #c6ff4d;      /* lime buttons carry dark text, not white */
  --pn-color-accent-hover: #d9ff7a;
  --pn-color-accent-tint: rgba(198, 255, 77, 0.16);
  --pn-color-text-onAccent: #0b0e14;
}
/* Owner 2026-10-13: the app screens (hero windows, H03/H04 UI recreations) keep the product's green in every exploration */
:root[data-accent] .hero__stage, :root[data-accent] .figure--ui, :root[data-accent] .mu-hero__win {
  --pn-color-accent-primary: var(--pn-color-brand-green);
  --pn-color-accent-fill: var(--pn-color-brand-greenFill);
  --pn-color-accent-hover: #006b4b;
  --pn-color-accent-tint: var(--pn-color-brand-greenTint);
  --pn-color-text-onAccent: #ffffff;
}

/* Owner 2026-10-13: neutral chrome (architect recommendation): off-white actions, green reserved for approved/verified */
:root[data-accent="neutral"] {
  --pn-color-accent-primary: #f2f0e9;
  --pn-color-accent-fill: #f2f0e9;
  --pn-color-accent-hover: #ffffff;
  --pn-color-accent-tint: rgba(242, 240, 233, 0.14);
  --pn-color-text-onAccent: #0b0e14;
}