/* =========================================================
   JSC LAYOUT TOKENS
   File: jsc-layout-tokens.css
   Layer: Layout System
   Version: 2.0

   PURPOSE
   ----------------------------------------------------------------
   Establish a generalized sizing and layout token system that:
   - reduces fine-grain source token sprawl
   - favors shared scales over role-specific source values
   - preserves existing legacy aliases for compatibility
   - creates a cleaner migration path for future component CSS

   SYSTEM MODEL
   ----------------------------------------------------------------
   FOUNDATION SCALES
   - Raw size values
   - Space scale
   - Box scale
   - Icon scale
   - Stroke scale

   LAYOUT HELPERS
   - Container widths
   - Gutters
   - Inline gaps
   - Panel / module helpers
   - Rule helpers

   LEGACY ALIASES
   - Existing header / nav / control tokens
   - Maintained to avoid breaking current CSS
   - Mapped to generalized scales where practical

   MIGRATION DIRECTION
   ----------------------------------------------------------------
   New work should prefer:
   - --jsc-space-*
   - --jsc-box-*
   - --jsc-icon-*
   - --jsc-inline-gap-*
   - --jsc-panel-max
   - --jsc-container-max / --jsc-container-wide

   Legacy aliases remain in place until components are gradually
   refactored to consume the generalized system directly.
========================================================= */

:root{
/* ========================================================
   1) FOUNDATION — RAW SIZE SCALE
   Minimal foundational values only
======================================================== */

  --jsc-size-1: 1px;

  --jsc-size-2: 2px;

  --jsc-size-8: 8px;

  --jsc-size-10: 10px;

  --jsc-size-12: 12px;

  --jsc-size-14: 14px;

  --jsc-size-16: 16px;

  --jsc-size-20: 20px;

  --jsc-size-24: 24px;

  --jsc-size-28: 28px;

  --jsc-size-32: 32px;

  --jsc-size-38: 38px;

  --jsc-size-48: 48px;

  --jsc-size-60: 60px;

  --jsc-size-72: 72px;

  --jsc-size-80: 80px;

  --jsc-size-88: 88px;


/* ========================================================
   2) FOUNDATION — SPACE SCALE
   Padding, gaps, breathing room
======================================================== */

  --jsc-space-2xs: var(--jsc-size-8);

  --jsc-space-xs: var(--jsc-size-10);

  --jsc-space-sm: var(--jsc-size-12);

  --jsc-space-md: var(--jsc-size-16);

  --jsc-space-lg: var(--jsc-size-20);

  --jsc-space-xl: var(--jsc-size-24);

  --jsc-space-2xl: var(--jsc-size-28);


/* ========================================================
   3) FOUNDATION — BOX SCALE
   Reusable dimensional tiers for bars, controls, logos, etc.
======================================================== */

  --jsc-box-sm: var(--jsc-size-28);

  --jsc-box-md: var(--jsc-size-32);

  --jsc-box-lg: var(--jsc-size-38);

  --jsc-box-xl: var(--jsc-size-48);

  --jsc-box-2xl: var(--jsc-size-60);

  --jsc-box-3xl: var(--jsc-size-72);

  --jsc-box-4xl: var(--jsc-size-80);

  --jsc-box-5xl: var(--jsc-size-88);


/* ========================================================
   4) FOUNDATION — ICON SCALE
   Compact, generalized icon sizing
======================================================== */

  --jsc-icon-sm: var(--jsc-size-16);

  --jsc-icon-md: 18px;

  --jsc-icon-lg: var(--jsc-size-20);

  --jsc-icon-tight: var(--jsc-size-12);

  --jsc-icon-compact: var(--jsc-size-10);


/* ========================================================
   5) FOUNDATION — STROKE SCALE
======================================================== */

  --jsc-stroke-hairline: var(--jsc-size-1);

  --jsc-stroke-regular: 1.5px;

  --jsc-stroke-strong: var(--jsc-size-2);


/* ========================================================
   6) LAYOUT HELPERS — WIDTHS
   Semantic layout widths stay direct
======================================================== */

  --jsc-panel-max: 1100px;

  --jsc-container-max: 1200px;

  --jsc-container-wide: 1400px;


/* ========================================================
   7) LAYOUT HELPERS — GUTTERS
======================================================== */

  --jsc-gutter-desktop: 50px;

  --jsc-gutter-tablet: var(--jsc-space-xl);

  --jsc-gutter-mobile: var(--jsc-space-md);


/* ========================================================
   8) LAYOUT HELPERS — INLINE GAPS
======================================================== */

  --jsc-inline-gap-sm: var(--jsc-space-md);

  --jsc-inline-gap-md: var(--jsc-space-xl);

  --jsc-inline-gap-lg: var(--jsc-space-2xl);


/* ========================================================
   9) LAYOUT HELPERS — MODULE / PANEL HELPERS
======================================================== */

  --jsc-panel-gutter: var(--jsc-space-2xl);

  --jsc-module-col-gap: clamp(var(--jsc-space-md), 2vw, var(--jsc-space-2xl));


/* ========================================================
   10) LAYOUT HELPERS — RULE HELPERS
======================================================== */

  --jsc-rule-hairline: var(--jsc-stroke-hairline);
  
  --jsc-rule-offset-tight: -5px;

/* ========================================================
   10) LAYOUT HELPERS — RULE HELPERS
======================================================== */
  --jsc-header-current-height: 96px;

  --jsc-header-height-desktop: 116px;

  --jsc-header-height-tablet: 86px;

  --jsc-header-height-mobile: 74px;

  --jsc-idx-fixed-stack: 420px;
}