/* ==========================================================================
   Plek Design System v6 — tokens
   --------------------------------------------------------------------------
   Source of truth: the Framer project "Plek copy" (reviewed 2026-09-19).
   The Framer file defines no color styles and one text style, so every
   value here was mined from what the design actually uses, then reduced to
   the smallest set that reproduces it.

   Names are shared with landing/static/landing/site.css (the Django port of
   the same design), so the marketing site is a consumer of this file, not a
   fork of it. Where the port darkened a Framer gray to pass WCAG, the
   accessible value is the token and the raw Framer value is kept in a
   comment.

   Rule: if a value is not in this file, it is not in the system.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/space-grotesk/space-grotesk-latin-400.1a806675790e.woff2") format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/space-mono/space-mono-latin-400.049dfc5919c2.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../assets/fonts/inter/inter-latin-300-700.65850a373e25.woff2") format('woff2');
}

:root {
  /* ── Grounds ─────────────────────────────────────────────────────────────
     Depth is a three-step gray ladder plus hairline rules. No shadows.     */
  --pk-ground: #F9F9F9;          /* page */
  --pk-canvas: #FFFFFF;          /* product-app option: inputs, brightest panel. 1.05:1 on ground — only reads as a layer with a hairline */
  --pk-surface: #FAFAFA;         /* nav cells, panels, ghost controls, open FAQ rows sit on --pk-card */
  --pk-card: #F0F0F0;            /* cards, feature cells, badges */
  --pk-card-hover: #EDEDED;      /* card / row hover */
  --pk-rule: #E0E0E0;            /* every hairline: rails, card gaps, section rules, table rows */
  --pk-control-border: #888888;  /* 3.37 ground / 3.40 surface / 3.11 card — any line that bounds a control (WCAG 1.4.11) */

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --pk-ink-strong: #000000;      /* card titles, FAQ questions */
  --pk-ink: #292929;             /* display + headings, default text */
  --pk-ink-2: #575757;           /* body copy */
  --pk-muted: #6B6B6B;           /* THE secondary gray: labels, captions, tertiary text — on ANY gray. Framer: #858585/#868686 (3.46:1) → 5.06 ground / 4.68 card */
  --pk-deco: #A2A2A2;            /* raw Framer gray — decorative marks only, never text */

  /* ── Accent: one blue family ─────────────────────────────────────────── */
  --pk-navy: #294460;            /* THE accent: headline second line, label numerals, hover on solid, dark bands */
  --pk-navy-2: #2F4C6A;          /* weave highlight on navy */
  --pk-blue: #3C7EB3;            /* the mark's signal strand; reserved for data marks if charts ship. 4.13:1 — never body-size text */
  --pk-blue-text: #326D9D;       /* the same blue, darkened for body-size text and link hover: 5.24 ground / 4.84 card */
  --pk-blue-ink: #5C7EA2;        /* illustration strokes only — 4.02:1, never text */
  --pk-sky: #ACC9E8;             /* illustration fills, text on navy */
  --pk-sky-wash: #EAF4FE;        /* lightest illustration face, selected-row wash */
  --pk-illus-shade: #8CAAC8;     /* the shaded (left) face of the isometric cubes — illustration fill only, 2.3:1 */

  /* ── Dark grounds ────────────────────────────────────────────────────── */
  --pk-charcoal: #27282A;        /* solid button, the one dark card per row, active tab */
  --pk-charcoal-2: #1D1E1F;      /* border on charcoal */
  --pk-on-dark: #FFFFFF;
  --pk-on-dark-2: #DADADA;
  --pk-on-dark-rule: rgba(255, 255, 255, 0.5);

  /* ── Status (extension — not in the Framer file; for product UI only) ──
     Desaturated to sit beside the grays; each passes 4.5:1 on its tint.   */
  --pk-positive: #2C6A4C;   --pk-positive-tint: #E8F1EC;
  --pk-warning:  #80601A;   --pk-warning-tint:  #F5EFDF;
  --pk-negative: #9C3B3B;   --pk-negative-tint: #F6E9E9;
  --pk-negative-on-dark: #E99A9A;  /* error text on charcoal / navy */
  --pk-info:     var(--pk-navy); --pk-info-tint: var(--pk-sky-wash);

  /* ── Data-viz ramp (extension, derived from the accent family) ───────── */
  --pk-viz-1: var(--pk-navy); --pk-viz-2: var(--pk-blue); --pk-viz-3: var(--pk-illus-shade);
  --pk-viz-4: var(--pk-sky);  --pk-viz-5: var(--pk-charcoal); --pk-viz-6: var(--pk-deco);

  /* ── Faces ───────────────────────────────────────────────────────────── */
  --pk-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;   /* headlines, nav, step titles */
  --pk-font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace; /* section labels, numerals, durations */
  --pk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* everything else */

  /* ── Type scale (desktop; tablet/phone steps are at the foot of this file) ──
     Every face is set tight: tracking is part of the voice.               */
  --pk-fs-display: 48px;    /* Space Grotesk — hero. Inter 300 — the CTA statement */
  --pk-fs-h2: 36px;         /* Space Grotesk — section headline. Inter 300 — big numbers. Space Mono — "1/" numerals */
  --pk-fs-numeral-s: 24px;  /* Space Mono — inactive / secondary numerals */
  --pk-fs-h3: 22px;         /* Space Grotesk — step / panel title. Inter 300 — testimonial quote */
  --pk-fs-title: 20px;      /* Inter 400 — card title */
  --pk-fs-lead: 18px;       /* Inter — intro paragraph */
  --pk-fs-body: 16px;
  --pk-fs-label: 16px;      /* Space Mono — section label */
  --pk-fs-small: 14px;
  --pk-fs-ui: 13px;         /* product UI only — table cells, nav rows, inputs */
  --pk-fs-caption: 12px;    /* the smallest size in the system */
  --pk-lh-tight: 1.2;       /* all headings, labels, controls */
  --pk-lh-snug: 1.3;        /* small copy */
  --pk-lh-body: 1.4;        /* paragraphs */
  --pk-ls-display: -0.05em; /* Space Grotesk, card titles */
  --pk-ls-body: -0.04em;    /* Inter body, Space Mono */
  --pk-ls-light: -0.07em;   /* Inter 300 at stat size */
  --pk-ls-ui: -0.02em;      /* small UI: tabs, chips, dense tables */
  --pk-ls-none: 0;          /* untracked: the CTA statement, avatar initials */
  --pk-ls-caps: 0.04em;     /* the one place the system tracks OUT: 12px uppercase row actions (product UI) */

  /* ── Space: a 10/20/40/60 rhythm with a fine 4/8 sub-grid for UI ─────── */
  --pk-sp-1: 4px;
  --pk-sp-1h: 6px;   /* chip and tight-row padding */
  --pk-sp-2: 8px;
  --pk-sp-3: 10px;   /* default gap */
  --pk-sp-4: 12px;
  --pk-sp-5: 16px;
  --pk-sp-6: 20px;   /* default padding — every card, cell and panel */
  --pk-sp-7: 24px;
  --pk-sp-8: 32px;
  --pk-sp-9: 40px;   /* section padding, block gap */
  --pk-sp-10: 60px;  /* large block gap, band padding */
  --pk-sp-11: 80px;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --pk-radius-xs: 1px; /* progress bars, switch knob, status dot */
  --pk-radius-s: 2px;  /* buttons, tags, tabs */
  --pk-radius: 4px;    /* cards, panels, nav rail, bands. Never larger. */
  --pk-hairline: 0.5px;/* tag outlines */
  --pk-line: 1px;

  /* ── Motion: transitions between states, never loops ─────────────────── */
  --pk-ease: cubic-bezier(.2, .7, .2, 1);        /* CSS stand-in for Framer's 0.4s / 0.2-bounce spring */
  --pk-ease-in: cubic-bezier(.5, 0, .88, .77);   /* quick hover tint */
  --pk-dur-fast: 100ms;
  --pk-dur: 300ms;
  --pk-dur-slow: 600ms;

  /* ── Layers: the only z-index values in the system ───────────────────── */
  --pk-z-raised: 2;     /* a sticky table head, a focused cell */
  --pk-z-nav: 10;       /* the floating nav rail, the app header */
  --pk-z-popover: 30;   /* menus, tooltips */
  --pk-z-modal: 40;     /* scrim + dialog */
  --pk-z-toast: 50;     /* transient notifications: above everything */

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --pk-col-width: 90%;
  --pk-col-max: 1440px;      /* the railed column */
  --pk-measure-max: 1320px;  /* inner content max */
  --pk-measure-text: 68ch;   /* longest comfortable paragraph */
  --pk-nav-h: 41px;
  --pk-nav-top: var(--pk-sp-6);
  --pk-nav-offset: 80px;
  --pk-section-pad: 40px;
  --pk-card-min-h: 312px;    /* marketing card: icon top, copy bottom */
  --pk-bp-tablet: 1199.98px; /* documentation only — media queries cannot read custom properties */
  --pk-bp-phone: 809.98px;

  /* ── Weave grounds (8×8 tile decoded from the design's texture) ────────
     A data-URI cannot read custom properties, so the tile pixels are literal:
     navy tile = --pk-navy + --pk-navy-2; light tile = #F8F8F8 + #F2F2F2 (it paints its own ground). */
  --pk-weave-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' shape-rendering='crispEdges'%3E%3Crect width='100%25' height='100%25' fill='%23294460'/%3E%3Cpath fill='%232F4C6A' d='M9 0h4.5v4.5h-4.5zM27 0h4.5v4.5h-4.5zM4.5 4.5h4.5v4.5h-4.5zM22.5 4.5h4.5v4.5h-4.5zM31.5 4.5h4.5v4.5h-4.5zM0 9h4.5v4.5h-4.5zM9 9h4.5v4.5h-4.5zM18 9h4.5v4.5h-4.5zM22.5 9h4.5v4.5h-4.5zM27 9h4.5v4.5h-4.5zM4.5 13.5h4.5v4.5h-4.5zM9 13.5h4.5v4.5h-4.5zM13.5 13.5h4.5v4.5h-4.5zM22.5 13.5h4.5v4.5h-4.5zM31.5 13.5h4.5v4.5h-4.5zM0 18h4.5v4.5h-4.5zM9 18h4.5v4.5h-4.5zM27 18h4.5v4.5h-4.5zM4.5 22.5h4.5v4.5h-4.5zM13.5 22.5h4.5v4.5h-4.5zM22.5 22.5h4.5v4.5h-4.5zM0 27h4.5v4.5h-4.5zM4.5 27h4.5v4.5h-4.5zM9 27h4.5v4.5h-4.5zM18 27h4.5v4.5h-4.5zM27 27h4.5v4.5h-4.5zM4.5 31.5h4.5v4.5h-4.5zM13.5 31.5h4.5v4.5h-4.5zM22.5 31.5h4.5v4.5h-4.5zM27 31.5h4.5v4.5h-4.5zM31.5 31.5h4.5v4.5h-4.5z'/%3E%3C/svg%3E");
  --pk-weave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' shape-rendering='crispEdges'%3E%3Crect width='100%25' height='100%25' fill='%23F8F8F8'/%3E%3Cpath fill='%23F2F2F2' d='M9 0h4.5v4.5h-4.5zM27 0h4.5v4.5h-4.5zM4.5 4.5h4.5v4.5h-4.5zM22.5 4.5h4.5v4.5h-4.5zM31.5 4.5h4.5v4.5h-4.5zM0 9h4.5v4.5h-4.5zM9 9h4.5v4.5h-4.5zM18 9h4.5v4.5h-4.5zM22.5 9h4.5v4.5h-4.5zM27 9h4.5v4.5h-4.5zM4.5 13.5h4.5v4.5h-4.5zM9 13.5h4.5v4.5h-4.5zM13.5 13.5h4.5v4.5h-4.5zM22.5 13.5h4.5v4.5h-4.5zM31.5 13.5h4.5v4.5h-4.5zM0 18h4.5v4.5h-4.5zM9 18h4.5v4.5h-4.5zM27 18h4.5v4.5h-4.5zM4.5 22.5h4.5v4.5h-4.5zM13.5 22.5h4.5v4.5h-4.5zM22.5 22.5h4.5v4.5h-4.5zM0 27h4.5v4.5h-4.5zM4.5 27h4.5v4.5h-4.5zM9 27h4.5v4.5h-4.5zM18 27h4.5v4.5h-4.5zM27 27h4.5v4.5h-4.5zM4.5 31.5h4.5v4.5h-4.5zM13.5 31.5h4.5v4.5h-4.5zM22.5 31.5h4.5v4.5h-4.5zM27 31.5h4.5v4.5h-4.5zM31.5 31.5h4.5v4.5h-4.5z'/%3E%3C/svg%3E");
}
/* Responsive steps live on the tokens, so every consumer scales together.
   The Framer file's near-duplicate sizes (46/48, 32/34/36) are normalized here. */
@media (max-width: 1199.98px) {
  :root { --pk-section-pad: 32px; --pk-fs-h2: 34px; --pk-fs-label: 14px; }
}
@media (max-width: 809.98px) {
  :root {
    --pk-section-pad: 24px; --pk-card-min-h: 0px;
    --pk-fs-display: 32px; --pk-fs-h2: 24px; --pk-fs-h3: 20px;
    --pk-fs-numeral-s: 18px; --pk-fs-label: 12px;
  }
}