/* ==========================================================================
   NortysLink — Design System Tokens (Inspired by Like3s.vn & Hybrid Premium)
   File: css/tokens.css
   ========================================================================== */

:root {
  /* 1. Typography System
     - Display & Headings: Familjen Grotesk
     - Body & UI Controls: Instrument Sans
     - Technical URLs, IDs & Tabular Data: Be Vietnam Pro (Clean Sans with tabular-nums, no typewriter mono)
  */
  --font-display: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Be Vietnam Pro', 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 2. Like3s-Inspired Typographic Scale */
  --text-hero: clamp(2.15rem, 3.8vw, 3.1rem);
  --text-display: 2.25rem;      /* 36px */
  --text-h1: 1.5rem;            /* 24px */
  --text-h2: 1.125rem;          /* 18px */
  --text-h3: 0.9375rem;         /* 15px */
  --text-body: 0.875rem;        /* 14px */
  --text-ui: 0.8125rem;         /* 13px */
  --text-cap: 0.75rem;          /* 12px */
  --text-micro: 0.6875rem;      /* 11px */

  /* 3. Line Heights & Letter Spacing */
  --lh-tight: 1.18;
  --lh-heading: 1.28;
  --lh-body: 1.58;
  --lh-ui: 1.4;
  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-body: -0.003em;

  /* 4. Hybrid Premium Color System */
  --sidebar-bg: #151922;
  --sidebar-surface: #1D2330;
  --sidebar-hover: #252B36;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: #F8FAFC;
  --sidebar-muted: #94A3B8;

  --app-bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-subtle: #F8FAFC;
  --surface-hover: #F1F5F9;

  --primary: #246BFD;
  --primary-hover: #1756D8;
  --primary-soft: rgba(36, 107, 253, 0.09);
  --primary-border: rgba(36, 107, 253, 0.26);

  --text-primary: #171A21;
  --text-secondary: #667085;
  --text-muted: #98A2B3;

  --border: #E6EAF0;
  --border-strong: #D0D7E2;

  /* 5. Semantic State Tokens (Paired with explicit text labels) */
  --success-bg: #ECFDF3;
  --success-text: #027A48;
  --success-border: #ABEFC6;

  --warning-bg: #FFFAEB;
  --warning-text: #B54708;
  --warning-border: #FEDF89;

  --danger-bg: #FEF3F2;
  --danger-text: #B42318;
  --danger-border: #FECDCA;

  --neutral-bg: #F2F4F7;
  --neutral-text: #344054;
  --neutral-border: #E4E7EC;

  /* 6. Layout & Spacing Scale */
  --topbar-h: 58px;
  --public-header-h: 64px;
  --sidebar-w: 256px;
  --sidebar-collapsed-w: 72px;
  --container-max: 1280px;
  --workspace-max: 1440px;

  /* 7. Border Radius Scale (Refined SaaS Geometry) */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 8. Like3s Layered Elevation Shadows */
  --shadow-e1: 0 1px 2px rgba(14, 16, 25, 0.05);
  --shadow-e2: 0 4px 12px rgba(14, 16, 25, 0.07);
  --shadow-e3: 0 12px 28px rgba(14, 16, 25, 0.12);
  --shadow-e4: 0 24px 56px rgba(14, 16, 25, 0.2);
  --focus-ring: 0 0 0 3px rgba(36, 107, 253, 0.22);

  /* 9. Motion Budget (<= 180ms routine transitions) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-normal: 180ms;
}