/* ISCC Design System v2 — concatenated token CSS, CDN-free.
   Ported verbatim from the design bundle's tokens/{colors,typography,spacing,base}.css,
   in that order. fonts.css is deliberately excluded — it is the jsDelivr @font-face
   block; the self-hosted woff2 fonts land in a later sub-step. The base.css
   .iscc-grain background-image is neutralized (the grain.png asset is not served),
   so this stylesheet has zero external or dangling URLs. The --font-sans / --font-mono
   stacks list Arial / Consolas fallbacks, so pages render correctly with no webfont. */

/* ISCC Color Tokens
   Source of truth: iscc-brand-guidelines SKILL.md + iscc-web main.scss / lib/iscc.ts */

:root {
  /* ---------- Primary palette ---------- */
  --iscc-blue: #0054b2;        /* Primary brand — headers, links, CTAs */
  --iscc-blue-hover: #004695;  /* Pressed / hover for blue surfaces */
  --iscc-deep-navy: #123663;   /* Secondary — dark backgrounds, readout strips */
  --iscc-bright-yellow: #ffc300; /* Accent — highlights, the brand divider */
  --iscc-coral-red: #f56169;   /* Errors, the live ISCC code bar */
  --iscc-lime-green: #a6db50;  /* Success, the Instance layer */

  /* ---------- Extended blues ---------- */
  --iscc-sky-blue: #4596f5;    /* Light variant — secondary actions, info */
  --iscc-light-cyan: #7ac2f7;  /* Tertiary blue — subtle accents, scan-line */

  /* ---------- Neutrals ---------- */
  --iscc-white: #ffffff;       /* Primary background */
  --iscc-canvas: #fbf7f2;      /* App canvas — warm off-white (iscc-web body) */
  --iscc-off-white: #f8f9fa;   /* Secondary surface — insets, fields */
  --iscc-surface-2: #fcfcfd;   /* Card footers / subtle zebra */
  --iscc-light-gray: #e9ecef;  /* Borders and dividers */
  --iscc-border: #dee2e6;      /* Stronger control border */
  --iscc-border-strong: #ced4da; /* Inputs / dashed drop-zones */
  --iscc-medium-gray: #6c757d; /* Secondary text */
  --iscc-text-muted: #adb5bd;  /* Tertiary / placeholder text */
  --iscc-dark-gray: #343a40;   /* Primary body text */
  --iscc-near-black: #212529;  /* Headers and emphasis */

  /* ---------- ISCC-UNIT layer palette ----------
     The five components of an ISCC, ordered abstract → concrete.
     Mirrors UNIT_STYLE in iscc-web/lib/iscc.ts. */
  --iscc-unit-meta: #7ac2f7;       /* Meta — metadata similarity */
  --iscc-unit-semantic: #4596f5;   /* Semantic — semantic similarity (experimental) */
  --iscc-unit-content: #0054b2;    /* Content — syntactic similarity */
  --iscc-unit-data: #123663;       /* Data — data similarity */
  --iscc-unit-instance: #a6db50;   /* Instance — exact match / checksum */

  /* unit accent (darker, for text-on-light) */
  --iscc-unit-meta-accent: #1f86c9;
  --iscc-unit-semantic-accent: #2e7ad6;
  --iscc-unit-content-accent: #0054b2;
  --iscc-unit-data-accent: #123663;
  --iscc-unit-instance-accent: #6d9c2a;

  /* ---------- Semantic status aliases ---------- */
  --status-success: var(--iscc-lime-green);
  --status-success-text: #4d6e14;
  --status-warning: var(--iscc-bright-yellow);
  --status-warning-text: #7a5c00;
  --status-error: var(--iscc-coral-red);
  --status-error-text: #b3434a;
  --status-info: var(--iscc-sky-blue);

  /* ---------- Semantic surface / text aliases ---------- */
  --surface-page: var(--iscc-canvas);
  --surface-card: var(--iscc-white);
  --surface-inset: var(--iscc-off-white);
  --surface-dark: var(--iscc-deep-navy);
  --surface-brand: var(--iscc-blue);

  --text-heading: var(--iscc-near-black);
  --text-body: var(--iscc-dark-gray);
  --text-muted: var(--iscc-medium-gray);
  --text-faint: var(--iscc-text-muted);
  --text-on-dark: var(--iscc-white);
  --text-link: var(--iscc-blue);

  --border-subtle: var(--iscc-light-gray);
  --border-default: var(--iscc-border);
  --border-control: var(--iscc-border-strong);

  --focus-ring: rgba(0, 84, 178, 0.14);
  --accent: var(--iscc-bright-yellow);
}

/* ISCC Typography Tokens
   Headings & body: Readex Pro (Arial fallback)
   Code & ISCC-IDs: JetBrains Mono (Consolas fallback) */

:root {
  /* ---------- Font families ---------- */
  --font-sans: "Readex Pro", Arial, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace;

  /* ---------- Weights ----------
     Readex Pro reads light by default in the brand — 300 is the body weight,
     600/700 carry headings. */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Type scale (rem) ---------- */
  --text-2xs: 0.62rem;   /* unit codes, micro-labels */
  --text-xs: 0.72rem;    /* mono facts, captions */
  --text-sm: 0.82rem;    /* secondary UI text, tab labels */
  --text-base: 0.94rem;  /* body */
  --text-md: 1.05rem;    /* lead / product label */
  --text-lg: 1.3rem;     /* section titles */
  --text-xl: 1.75rem;    /* page subheads */
  --text-2xl: 2.1rem;    /* hero (small) */
  --text-3xl: 2.5rem;    /* hero (large) */

  /* ---------- Line heights ---------- */
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---------- Letter spacing ---------- */
  --tracking-tighter: -0.015em; /* hero headlines */
  --tracking-tight: -0.01em;    /* mono code rows */
  --tracking-normal: 0;
  --tracking-wide: 0.06em;      /* status pills */
  --tracking-wider: 0.1em;      /* product wordmark */
  --tracking-widest: 0.16em;    /* readout section labels */

  /* ---------- Semantic type aliases ---------- */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-code: var(--font-mono);
}

/* ISCC Spacing, Radius, Shadow & Layout Tokens
   Derived from the iscc-web Generator surface (Bootstrap-rem rhythm). */

:root {
  /* ---------- Spacing scale (rem) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;

  /* ---------- Radii ----------
     The brand pairs soft control radii with larger card radii.
     Pills are fully rounded; the geometric mark stays square. */
  --radius-xs: 0.4rem;   /* tags, small swatches */
  --radius-sm: 0.5rem;   /* buttons, inputs, icon buttons */
  --radius-md: 0.65rem;  /* fields, insets, unit fields */
  --radius-lg: 0.75rem;  /* cards, readout strips */
  --radius-xl: 1rem;     /* the intake instrument */
  --radius-pill: 9999px; /* status pills, chips, compare CTA */

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-focus: 2px;  /* active inputs, selected unit fields */

  /* ---------- Shadows ----------
     Cards float on a warm canvas with soft, navy-tinted shadows. */
  --shadow-sm:
    0 4px 8px -4px rgba(18, 54, 99, 0.08);
  --shadow-card:
    0 10px 24px -4px rgba(18, 54, 99, 0.14),
    0 4px 8px -4px rgba(18, 54, 99, 0.08);
  --shadow-raised:
    0 20px 40px -8px rgba(18, 54, 99, 0.18);
  --shadow-instrument:
    0 20px 50px -10px rgba(0, 0, 0, 0.3);   /* the white intake card on blue hero */
  --shadow-popover:
    0 10px 24px -4px rgba(18, 54, 99, 0.2);
  --shadow-focus:
    0 0 0 4px var(--focus-ring);

  /* ---------- Layout ---------- */
  --container-max: 1200px;   /* container-xl */
  --container-pad: 1.5rem;
  --header-height: 3.75rem;
}

/* ISCC base layer — element defaults + brand utilities.
   Loaded after tokens so it can reference the custom properties. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Grain texture overlay — the signature ISCC surface treatment.
   The grain.png asset is not served by the monitor, so the background-image
   reference is intentionally omitted here to keep this stylesheet URL-free; the
   size/blend declarations are harmless no-ops without an image. */
.iscc-grain {
  background-size: 256px 256px;
  background-blend-mode: overlay;
}

/* Brand keyframes — used by status dots, the decode readout and scan-line. */
@keyframes iscc-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes iscc-bit-flick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
@keyframes iscc-scan-sweep {
  0% { top: 0; }
  100% { top: calc(100% - 2px); }
}

/* Honor reduced-motion across every brand surface. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}