/* ═══════════════════════════════════════════════════════════════
   POCM Design System — global entry point
   Consumers link THIS file. It is an import manifest only.
   ═══════════════════════════════════════════════════════════════ */

/* tokens/fonts.css */
/* ───────────────────────────────────────────────────────────────
   Fonts — Archivo (display) · Hanken Grotesk (body) · IBM Plex Mono (labels)
   SELF-HOSTED: woff2 files inlined as data URIs (latin subset) so the brand
   fonts load with no dependency on Google Fonts. Regenerate: node self-host-fonts.mjs
   ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/font_7150c0ec5ad3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/font_7150c0ec5ad3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/font_7150c0ec5ad3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/font_7150c0ec5ad3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font_1f21c6eaa000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font_1f21c6eaa000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font_1f21c6eaa000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font_1f21c6eaa000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font_c36f509c0a8f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font_a76f53ca6612.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font_ad4580d8cb4b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font_9e1455e6e9c5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* tokens/colors.css */
/* ───────────────────────────────────────────────────────────────
   COLORS — POCM
   Single teal accent on a cool, near-neutral paper/ink palette.
   Base scales first, then semantic aliases. Reference semantic
   tokens in components; reach for base scales only for one-offs.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* ── Ink (text / dark) ─────────────────────────────── */
  --ink:        #0B1311; /* primary text, near-black with a green cast */
  --ink-2:      #3C4A47; /* body copy */
  --ink-3:      #7E8A87; /* muted captions, mono labels */
  --night:      #0B1513; /* dark section / CTA background */

  /* ── Paper (surfaces / light) ──────────────────────── */
  --paper:      #F2F4F3; /* default page canvas */
  --paper-2:    #FFFFFF; /* cards, raised surfaces */
  --paper-3:    #E9EDEB; /* sunken / alternating bands */

  /* ── Hairlines ─────────────────────────────────────── */
  --line:       #DCE2E0; /* default hairline border */
  --line-2:     #C5CDCB; /* stronger border, dividers */

  /* ── Accent (the one brand color) ──────────────────── */
  --accent:        #0E9888; /* teal — every interactive signal */
  --accent-deep:   #0A7A6F; /* hover / pressed / mono kicker text */
  --accent-bright: #2BB9AE; /* on-dark variant — links over night */
  --accent-tint:   #E3F1EF; /* faint teal wash, selected fills */

  /* ── Status ────────────────────────────────────────── */
  --danger:        #C0413B; /* form errors / destructive — muted brick red */
  --danger-tint:   #FBEDEC; /* faint error wash */

  /* ═══ SEMANTIC ALIASES ═════════════════════════════════ */

  /* Text */
  --text-strong:    var(--ink);
  --text-body:      var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-on-dark:   #FFFFFF;
  --text-on-dark-2: rgba(255,255,255,0.55);
  --text-accent:    var(--accent-deep);

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper-2);
  --surface-sunken: var(--paper-3);
  --surface-night:  var(--night);

  /* Borders */
  --border-hairline: var(--line);
  --border-strong:   var(--line-2);
  --border-on-dark:  rgba(255,255,255,0.16);

  /* Interactive */
  --action:        var(--accent);
  --action-hover:  var(--accent-deep);
  --action-on-dark: var(--accent-bright);
  --focus-ring:    var(--accent);

  /* Status (semantic) */
  --status-danger:      var(--danger);
  --status-danger-tint: var(--danger-tint);
}


/* tokens/typography.css */
/* ───────────────────────────────────────────────────────────────
   TYPOGRAPHY — POCM
   Archivo for display (tight tracking), Hanken Grotesk for body,
   IBM Plex Mono for technical labels / kickers / spec readouts.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* ── Families ──────────────────────────────────────── */
  --font-display: "Archivo", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ── Weights ───────────────────────────────────────── */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* ── Display scale (Archivo, tracking -0.03em) ─────── */
  --text-hero:    clamp(2.7rem, 5.4vw, 4.6rem); /* page hero h1 */
  --text-h1:      2.5rem;   /* 40px — section headline */
  --text-h2:      2rem;     /* 32px */
  --text-h3:      1.5rem;   /* 24px — card / article title */
  --text-h4:      1.125rem; /* 18px */

  /* ── Body scale (Hanken Grotesk) ───────────────────── */
  --text-lg:      1.125rem; /* 18px — lead paragraph */
  --text-base:    1rem;     /* 16px — default body */
  --text-sm:      0.875rem; /* 14px — secondary copy */
  --text-xs:      0.8125rem;/* 13px — fine print */

  /* ── Mono / label scale (IBM Plex Mono) ────────────── */
  --text-label:   0.7rem;   /* kickers, spec tags */
  --text-label-sm:0.62rem;  /* micro top-bar labels */

  /* ── Tracking ──────────────────────────────────────── */
  --track-display: -0.03em; /* the Archivo headline signature */
  --track-tight:   -0.01em;
  --track-label:   0.16em;  /* mono kicker tracking */
  --track-label-wide: 0.22em;

  /* ── Line heights ──────────────────────────────────── */
  --leading-hero: 0.98;
  --leading-tight:1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
}


/* tokens/spacing.css */
/* ───────────────────────────────────────────────────────────────
   SPACING — POCM
   4px base unit. Structural layout snaps to 8/16/24/32. Generous
   section rhythm (96px) reinforces the precision-instrument feel.
   ─────────────────────────────────────────────────────────────── */
:root {
  --space-0:   0;
  --space-1:   0.25rem; /* 4px */
  --space-2:   0.5rem;  /* 8px */
  --space-3:   0.75rem; /* 12px */
  --space-4:   1rem;    /* 16px */
  --space-5:   1.25rem; /* 20px */
  --space-6:   1.5rem;  /* 24px */
  --space-8:   2rem;    /* 32px */
  --space-10:  2.5rem;  /* 40px */
  --space-12:  3rem;    /* 48px */
  --space-16:  4rem;    /* 64px */
  --space-20:  5rem;    /* 80px */
  --space-24:  6rem;    /* 96px — section vertical rhythm */

  /* Semantic */
  --gutter:        var(--space-6);  /* page edge padding (mobile) */
  --gutter-lg:     var(--space-8);
  --card-pad:      var(--space-8);  /* interior card padding */
  --card-pad-sm:   var(--space-6);
  --section-y:     var(--space-16); /* vertical padding of a section (64px) */
  --stack:         var(--space-6);  /* default vertical gap */

  /* Layout */
  --container-max: 1280px; /* max-w-screen-xl */
  --container-text: 720px; /* readable measure */
}


/* tokens/effects.css */
/* ───────────────────────────────────────────────────────────────
   EFFECTS — POCM
   Radii are SHARP (schematic/technical). Elevation is restrained:
   hairline borders do the structural work; shadow is rare. The
   blueprint grid is the signature decorative motif.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* ── Radii — deliberately small ────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;  /* tags, mono chips */
  --radius-sm:   4px;  /* buttons, cards, inputs (the default) */
  --radius-md:   6px;
  --radius-pill: 9999px;

  /* ── Borders ───────────────────────────────────────── */
  --border-w:    1px;
  --border:      1px solid var(--border-hairline);
  --border-strong-rule: 1px solid var(--border-strong);

  /* ── Shadows — used sparingly ──────────────────────── */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(11,19,17,0.04);
  --shadow-card: 0 1px 3px rgba(11,19,17,0.05), 0 8px 24px rgba(11,19,17,0.04);
  --shadow-pop:  0 12px 40px rgba(11,19,17,0.12);

  /* ── Focus ─────────────────────────────────────────── */
  --focus-shadow: 0 0 0 3px var(--accent-tint);

  /* ── Motion ────────────────────────────────────────── */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        200ms; /* @kind other */

  /* ── Signature motifs (use as background shorthands) ── */
  /* Blueprint grid — faint engineering graph paper */
  --blueprint-line: rgba(11,19,17,0.045);
  --blueprint:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  --blueprint-size: 56px 56px;

  /* Schematic placeholder hatch — for un-slotted imagery */
  --hatch:
    repeating-linear-gradient(45deg,
      #EEF2F1, #EEF2F1 10px,
      #E9EDEB 10px, #E9EDEB 20px); /* @kind other */
}