/* ====================================================================
 * @hurc/css-tokens — design-token contract (STRUCTURAL tokens)
 * ====================================================================
 *
 * PURPOSE
 *   Declares the NAMES *and* the STRUCTURAL VALUES of the shared design
 *   tokens that the CSS primitive packages (@hurc/css-primitives-core,
 *   @hurc/css-primitives-ui) reference via var(--nllm-*).
 *
 *   This file ships ONLY tokens whose value is a structural constant any
 *   consumer reuses verbatim (a rem scale, a z-index ladder, a breakpoint
 *   threshold, a hue-free alpha overlay). It carries ZERO brand identity:
 *   no brand colour values, no font face choice, no feature-specific tokens.
 *   The brand token NAMES the consumer's :root MUST define are catalogued in
 *   src/contract.md (Group B). Brand/feature tokens (Group C) never enter
 *   this contract at all.
 *
 * TWO ORTHOGONAL MECHANISMS (do not conflate)
 *   1. nllm  — a BUILD-TIME namespace substitution. The literal token
 *      `nllm` is replaced by the consumer's namespace (passed as a
 *      --prefix flag) so `--nllm-space-md` becomes `--ndp-space-md`,
 *      `--nllm-space-md`, etc. This is the ONLY thing the build does.
 *   2. :root theming — the RUNTIME realisation of brand VALUES. The consumer
 *      defines `--<prefix>-color-primary` in its own :root. NOT a build step.
 *
 *   This file is the mechanism-1 half: structural names + structural values,
 *   namespaced with nllm. Brand values are mechanism-2, owned by the
 *   consumer.
 *
 * CONSUMER-BLIND
 *   Every token name carries the literal `nllm` placeholder in place of
 *   a namespace. No namespace, brand colour, font face, or framework identity
 *   is hardcoded here. A `#hex` inside `var(--x, #hex)` is a structural
 *   fallback (allowed); there are no bare brand literals.
 *
 * Tokenization (consumer build):
 *   nllm   → consumer namespace (passed via --prefix; never hardcoded)
 *
 * Build:
 *   node ../../tools/css-prefix-build.js --in src --out dist --prefix <yours>
 * ==================================================================== */

:root {
	/* ════════════════════════════════════════════════════════════════
	 * SPACING SCALE (base)
	 *
	 * Core spacing tokens for padding, margin, gap. Exponential growth
	 * for visual hierarchy. Pure rem ladder — no identity.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-space-xs: 0.25rem;              /* 4px  - micro spacing (icon-to-text gap) */
	--nllm-space-sm: 0.5rem;               /* 8px  - tight spacing (button padding, list gaps) */
	--nllm-space-md: 1rem;                 /* 16px - standard spacing (card padding, form fields) */
	--nllm-space-lg: 1.5rem;               /* 24px - comfortable spacing (section gaps) */
	--nllm-space-xl: 2rem;                 /* 32px - large spacing (card padding, headers) */
	--nllm-space-2xl: 3rem;                /* 48px - extra large (section padding) */
	--nllm-space-3xl: 4rem;                /* 64px - section breaks */
	--nllm-space-4xl: 6rem;                /* 96px - major section breaks */

	/* ════════════════════════════════════════════════════════════════
	 * SPACING SCALE (extended)
	 *
	 * Fills gaps between base spacing tokens for fine-grained control.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-space-2xs: 0.125rem;            /* 2px  - micro spacing */
	--nllm-space-xs-plus: 0.375rem;        /* 6px  - between xs(4) and sm(8) */
	--nllm-space-sm-plus: 0.625rem;        /* 10px - between sm(8) and md(16) */
	--nllm-space-sm-lg: 0.75rem;           /* 12px - common padding (buttons, inputs) */
	--nllm-space-md-sm: 0.875rem;          /* 14px - between sm(8) and md(16) */
	--nllm-space-md-plus: 1.25rem;         /* 20px - between md(16) and lg(24) */

	/* ════════════════════════════════════════════════════════════════
	 * BORDER RADIUS SCALE
	 *
	 * Consistent corner rounding. sm(6px) → full(pill shape).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-radius-sm: 6px;                 /* small radius - badges, tags */
	--nllm-radius-md: 12px;                /* medium radius - buttons, inputs, icons */
	--nllm-radius-lg: 16px;                /* large radius - cards, panels */
	--nllm-radius-xl: 24px;                /* extra large radius - hero cards */
	--nllm-radius-full: 9999px;            /* full radius - pills, circular shapes */

	/* ════════════════════════════════════════════════════════════════
	 * SHADOW ELEVATION SYSTEM
	 *
	 * Depth through layered shadows. sm → xl (increasing elevation).
	 * Black-alpha only — hue-free, no brand identity.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--nllm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--nllm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--nllm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

	/* ════════════════════════════════════════════════════════════════
	 * TRANSITION TIMING SYSTEM
	 *
	 * Consistent animation speeds. fast(0.15s) → slow(0.35s) + a
	 * Material-Design bounce easing. Durations + easing, not brand.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-transition-fast: 0.15s ease;    /* fast - color, opacity */
	--nllm-transition-normal: 0.25s ease;  /* normal - hover, focus */
	--nllm-transition-slow: 0.35s ease;    /* slow - slide-in, expansion */
	--nllm-transition-bounce: 0.25s cubic-bezier(0.4, 0, 0.2, 1);  /* Material Design easing */

	/* ════════════════════════════════════════════════════════════════
	 * FONT FAMILIES (generic stacks only)
	 *
	 * Mono + system stacks are generic OS/web-safe fallbacks with NO
	 * brand face. The brand body/heading families (e.g. a specific
	 * typeface choice) are Group B — the consumer's :root owns them.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--nllm-font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* ════════════════════════════════════════════════════════════════
	 * BASE TYPOGRAPHY SETTINGS
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-font-size-base: 14px;           /* base font size - body text */
	--nllm-line-height: 1.6;               /* normal body text line height */

	/* ════════════════════════════════════════════════════════════════
	 * HEADING SIZE SCALE
	 *
	 * H1 largest → H6 smallest. Exponential modular scale, structural.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-font-size-h1: 36px;             /* page/hero headlines */
	--nllm-font-size-h2: 30px;             /* section headings */
	--nllm-font-size-h3: 24px;             /* subsection headings */
	--nllm-font-size-h4: 18px;             /* card headings */
	--nllm-font-size-h5: 14px;             /* small headings */
	--nllm-font-size-h6: 12px;             /* micro headings */

	/* ════════════════════════════════════════════════════════════════
	 * FONT SIZE SCALE FOR COMPONENTS
	 *
	 * Complements the heading scale for UI components. 3xs(9px) → 6xl(48px).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-font-size-3xs: 0.5625rem;       /* 9px  - micro text, rare use */
	--nllm-font-size-2xs: 0.625rem;        /* 10px - tiny labels, badges */
	--nllm-font-size-2xs-plus: 0.6875rem;  /* 11px - between tiny and small */
	--nllm-font-size-xs: 0.75rem;          /* 12px - small text, captions */
	--nllm-font-size-sm: 0.8125rem;        /* 13px - secondary text */
	--nllm-font-size-md: 0.9375rem;        /* 15px - slightly emphasized */
	--nllm-font-size-lg: 1rem;             /* 16px - prominent component text */
	--nllm-font-size-xl: 1.125rem;         /* 18px - large component text */
	--nllm-font-size-2xl: 1.25rem;         /* 20px - extra large */
	--nllm-font-size-3xl: 1.5rem;          /* 24px - section headers (same as h3) */
	--nllm-font-size-4xl: 2rem;            /* 32px - large headers */
	--nllm-font-size-5xl: 2.5rem;          /* 40px - hero text */
	--nllm-font-size-6xl: 3rem;            /* 48px - display text */

	/* ════════════════════════════════════════════════════════════════
	 * FONT WEIGHT SCALE
	 *
	 * Semantic names for consistent weight usage. light(300) → black(900).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-font-weight-light: 300;         /* subtle text */
	--nllm-font-weight-normal: 400;        /* body text (default) */
	--nllm-font-weight-medium: 500;        /* slight emphasis */
	--nllm-font-weight-semibold: 600;      /* subheadings, labels */
	--nllm-font-weight-bold: 700;          /* headings, strong emphasis */
	--nllm-font-weight-extrabold: 800;     /* extra emphasis (rare) */
	--nllm-font-weight-black: 900;         /* maximum emphasis (very rare) */

	/* ════════════════════════════════════════════════════════════════
	 * LINE HEIGHT SCALE
	 *
	 * Different line heights per text context. none(1.0) → relaxed(1.75).
	 * Ratios, universal.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-line-height-none: 1;            /* icons, single-line headings */
	--nllm-line-height-tighter: 1.2;       /* compact headings */
	--nllm-line-height-tight: 1.25;        /* multi-line headings */
	--nllm-line-height-compact: 1.3;       /* tight body text */
	--nllm-line-height-snug: 1.375;        /* comfortable body text */
	--nllm-line-height-comfortable: 1.4;   /* standard body text */
	--nllm-line-height-cozy: 1.5;          /* relaxed body text (WCAG minimum) */
	--nllm-line-height-relaxed: 1.75;      /* very comfortable, long-form */

	/* ════════════════════════════════════════════════════════════════
	 * ICON SIZE SCALE
	 *
	 * Standardized icon dimensions. 2xs(10px) → 3xl(40px) rem ladder.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-icon-2xs: 0.625rem;             /* 10px */
	--nllm-icon-xs: 0.75rem;               /* 12px */
	--nllm-icon-sm: 0.875rem;              /* 14px */
	--nllm-icon-md: 1rem;                  /* 16px */
	--nllm-icon-base: 1.125rem;            /* 18px */
	--nllm-icon-lg: 1.25rem;               /* 20px */
	--nllm-icon-xl: 1.5rem;                /* 24px */
	--nllm-icon-2xl: 2rem;                 /* 32px */
	--nllm-icon-3xl: 2.5rem;               /* 40px */

	/* ════════════════════════════════════════════════════════════════
	 * COMPONENT SIZE SCALE
	 *
	 * Standard heights for interactive elements. xs(24px) → xl(56px).
	 * Control heights, structural.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-size-xs: 1.5rem;                /* 24px - compact */
	--nllm-size-sm: 2rem;                  /* 32px - small */
	--nllm-size-md: 2.5rem;                /* 40px - default (with padding = 48px touch target) */
	--nllm-size-lg: 3rem;                  /* 48px - large */
	--nllm-size-xl: 3.5rem;                /* 56px - extra large */

	/* ════════════════════════════════════════════════════════════════
	 * BORDER WIDTH SCALE
	 *
	 * Consistent border thicknesses. thin(1px) → thick(3px).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-border-width-thin: 1px;         /* standard border (default) */
	--nllm-border-width-medium: 2px;       /* emphasized border (focus, active) */
	--nllm-border-width-thick: 3px;        /* strong border (error, high emphasis) */

	/* ════════════════════════════════════════════════════════════════
	 * Z-INDEX LADDER
	 *
	 * Layering system to prevent z-index wars. 100-800 in 100-unit
	 * increments. The ORDERING is the contract (tooltip primitives read
	 * --nllm-z-tooltip).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-z-dropdown: 100;                /* dropdown menus */
	--nllm-z-sticky: 200;                  /* sticky headers, floating elements */
	--nllm-z-fixed: 300;                   /* fixed position elements */
	--nllm-z-modal-backdrop: 400;          /* modal background overlay */
	--nllm-z-modal: 500;                   /* modal dialogs */
	--nllm-z-popover: 600;                 /* popovers (above modals) */
	--nllm-z-tooltip: 700;                 /* tooltips (above popovers) */
	--nllm-z-toast: 800;                   /* toast notifications (highest) */

	/* ════════════════════════════════════════════════════════════════
	 * LAYOUT CONSTRAINTS
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-container-max: 1140px;          /* maximum content width (Bootstrap lg container) */

	--nllm-text-hide-breakpoint: 480px;    /* breakpoint for icon-only mode (hide text labels) */

	/* ════════════════════════════════════════════════════════════════
	 * RESPONSIVE BREAKPOINTS (named tokens)
	 *
	 * Mobile-first device thresholds. Industry-standard widths, not brand.
	 * 320px (sm-mobile) → 1920px (xl-desktop).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-breakpoint-sm-mobile: 320px;    /* small mobile (iPhone SE) */
	--nllm-breakpoint-lg-mobile: 480px;    /* large mobile (iPhone 12+, Galaxy S) */
	--nllm-breakpoint-tablet-portrait: 600px;  /* tablet portrait (iPad Mini portrait) */
	--nllm-breakpoint-tablet: 768px;       /* tablet landscape (iPad landscape) */
	--nllm-breakpoint-desktop: 1024px;     /* desktop (laptops) */
	--nllm-breakpoint-lg-desktop: 1280px;  /* large desktop (monitors) */
	--nllm-breakpoint-xl-desktop: 1920px;  /* extra large desktop (4K monitors) */

	/* ════════════════════════════════════════════════════════════════
	 * RESPONSIVE BREAKPOINTS (min / max / range aliases)
	 *
	 * Derived min/max/range tokens for media-query composition.
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-bp-xs-mobile-max: 319px;        /* ultra-compact mobile (max) */
	--nllm-bp-sm-mobile-min: 320px;        /* small mobile (min) */
	--nllm-bp-sm-mobile-max: 479px;        /* small mobile (max) */
	--nllm-bp-lg-mobile-min: 480px;        /* large mobile (min) */
	--nllm-bp-lg-mobile-max: 599px;        /* large mobile (max) */
	--nllm-bp-tablet-portrait-min: 600px;  /* tablet portrait (min) */
	--nllm-bp-tablet-portrait-max: 767px;  /* tablet portrait (max) */
	--nllm-bp-tablet-min: 768px;           /* tablet landscape (min) */
	--nllm-bp-tablet-max: 1023px;          /* tablet landscape (max) */
	--nllm-bp-desktop-min: 1024px;         /* desktop (min) */
	--nllm-bp-desktop-max: 1279px;         /* desktop (max) */
	--nllm-bp-lg-desktop-min: 1280px;      /* large desktop (min) */
	--nllm-bp-xl-desktop-min: 1920px;      /* extra large desktop (min) */
	--nllm-bp-mobile-only-max: 599px;      /* mobile-only layouts */
	--nllm-bp-tablet-up-min: 600px;        /* tablet and above */
	--nllm-bp-desktop-up-min: 1024px;      /* desktop and above */

	/* ════════════════════════════════════════════════════════════════
	 * OVERLAY & ALPHA (hue-free)
	 *
	 * White overlays for light accents on dark surfaces; black overlays
	 * for darkening on light surfaces. Pure black/white alpha — no hue,
	 * no brand identity (the brand-derived alpha overlays are Group C and
	 * stay with the consumer's brand colour).
	 * ════════════════════════════════════════════════════════════════ */

	--nllm-overlay-white-subtle: rgba(255, 255, 255, 0.1);  /* 10% white overlay */
	--nllm-overlay-white-light: rgba(255, 255, 255, 0.2);   /* 20% white overlay */
	--nllm-overlay-black-subtle: rgba(0, 0, 0, 0.05);       /* 5% black overlay */
	--nllm-overlay-black-light: rgba(0, 0, 0, 0.1);         /* 10% black overlay */
	--nllm-overlay-black-medium: rgba(0, 0, 0, 0.2);        /* 20% black overlay */
	--nllm-overlay-black-heavy: rgba(0, 0, 0, 0.4);         /* 40% black overlay */
	--nllm-overlay-black-dark: rgba(0, 0, 0, 0.6);          /* 60% black overlay */
}