/* ==========================================================================
   NCLI 2026 Modern UI System — Design Tokens
   File: css/modern/tokens.css
   ========================================================================== */

:root {
  /* ===== BRAND COLOR SYSTEM (HSL Driven) ===== */
  --ncli-hue-primary: 221;
  --ncli-sat-primary: 83%;
  --ncli-light-primary: 53%;

  --color-primary:        hsl(var(--ncli-hue-primary), var(--ncli-sat-primary), var(--ncli-light-primary));
  --color-primary-hover:  hsl(var(--ncli-hue-primary), var(--ncli-sat-primary), 45%);
  --color-primary-active: hsl(var(--ncli-hue-primary), var(--ncli-sat-primary), 38%);
  --color-primary-light:  hsl(var(--ncli-hue-primary), 90%, 96%);
  --color-primary-subtle: hsl(var(--ncli-hue-primary), 80%, 88%);
  --color-primary-muted:  hsl(var(--ncli-hue-primary), 80%, 94%);

  --color-secondary:       hsl(222, 47%, 11%);
  --color-secondary-hover: hsl(222, 47%, 18%);

  --color-accent:       hsl(142, 71%, 45%);
  --color-accent-hover: hsl(142, 76%, 36%);
  --color-accent-light: hsl(142, 84%, 95%);

  /* ===== SURFACE COLORS ===== */
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted:  #f1f5f9;
  --color-surface-hover:  #e8edf5;
  --color-border:         #e2e8f0;
  --color-border-subtle:  #f1f5f9;

  /* ===== TEXT COLORS ===== */
  --color-text:           #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted:     #64748b;
  --color-text-inverse:   #ffffff;
  --color-text-light:     #94a3b8;

  /* ===== STATUS COLORS ===== */
  --color-success:    #16a34a;
  --color-success-bg: #dcfce7;
  --color-warning:    #d97706;
  --color-warning-bg: #fef3c7;
  --color-danger:     #dc2626;
  --color-danger-bg:  #fee2e2;
  --color-info:       #2563eb;
  --color-info-bg:    #eff6ff;

  /* ===== SPACING SCALE (8pt Grid) ===== */
  --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 */

  /* ===== BORDER RADIUS ===== */
  --radius-xs:   0.25rem;  /*  4px */
  --radius-sm:   0.375rem; /*  6px */
  --radius-md:   0.625rem; /* 10px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-2xl:  2rem;     /* 32px */
  --radius-pill: 9999px;

  /* ===== ELEVATION SHADOWS ===== */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:    0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md:    0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl:    0 20px 48px rgba(15, 23, 42, 0.16);
  --shadow-2xl:   0 32px 64px rgba(15, 23, 42, 0.2);
  --shadow-glow:  0 0 20px rgba(37, 99, 235, 0.25);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.06);

  /* ===== TYPOGRAPHY STACK & FLUID SCALE ===== */
  --font-family:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-body: 1rem;       /* 16px */
  --font-size-lead: 1.125rem;   /* 18px */
  --font-size-h4:   1.25rem;    /* 20px */
  --font-size-h3:   clamp(1.35rem, 2.5vw, 1.65rem);
  --font-size-h2:   clamp(1.75rem, 3.5vw, 2.25rem);
  --font-size-h1:   clamp(2.25rem, 5vw, 3.25rem);

  --line-height-tight:  1.2;
  --line-height-snug:   1.35;
  --line-height-normal: 1.6;

  /* ===== MOTION & EASINGS ===== */
  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   450ms;
  --duration-slower: 700ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* ===== LAYOUT CONTAINERS ===== */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1140px;
  --container-wide: 1280px;

  /* ===== Z-INDEX SCALE ===== */
  --z-below:    -1;
  --z-base:      1;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* ===== GLASSMORPHISM ===== */
  --glass-bg:     rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur:   16px;

  /* ===== GRADIENTS ===== */
  --gradient-primary:    linear-gradient(135deg, hsl(221, 83%, 53%), hsl(221, 83%, 43%));
  --gradient-hero:       linear-gradient(135deg, hsl(221, 83%, 53%) 0%, hsl(250, 83%, 60%) 100%);
  --gradient-accent:     linear-gradient(135deg, hsl(142, 71%, 45%), hsl(180, 71%, 40%));
  --gradient-surface:    linear-gradient(135deg, #f8fafc 0%, #e8edf5 100%);
  --gradient-dark:       linear-gradient(135deg, hsl(222, 47%, 11%), hsl(222, 47%, 18%));
  --gradient-text:       linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));

  /* ===== COMPONENT SIZES ===== */
  --btn-height-sm: 32px;
  --btn-height-md: 42px;
  --btn-height-lg: 52px;
  --input-height:  44px;
  --header-height: 74px;
  --header-height-scrolled: 64px;
}

/* ===== DARK MODE ===== */
body.dark,
[data-theme="dark"] {
  --color-bg:             #020617;
  --color-surface:        #0f172a;
  --color-surface-raised: #1e293b;
  --color-surface-muted:  #1e293b;
  --color-surface-hover:  #263047;
  --color-border:         #334155;
  --color-border-subtle:  #1e293b;

  --color-text:           #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:     #94a3b8;
  --color-text-inverse:   #0f172a;
  --color-text-light:     #64748b;

  --color-primary-light:  rgba(37, 99, 235, 0.15);
  --color-primary-muted:  rgba(37, 99, 235, 0.08);
  --glass-bg:     rgba(15, 23, 42, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:    0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 20px rgba(37, 99, 235, 0.35);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
}