/*
 * Lxera | Skills — design tokens as CSS custom properties.
 * Single source of truth mirrors docs/lxera-design-system.md.
 * Additive: new pages should reference var(--lx-*) instead of raw hex.
 * Existing self-contained Blade pages can be migrated incrementally.
 *
 * Load AFTER lxera-fonts.css and BEFORE page styles, e.g.:
 *   <link rel="stylesheet" href="{{ asset('assets/default/css/lxera-tokens.css') }}">
 */

:root {
  /* ---------- Brand / primary ---------- */
  --lx-primary:           #1024DD;
  --lx-primary-hover:     #0c1cb0;   /* also seen as #0D1CB3 */
  --lx-primary-hover-alt: #0D1CB3;
  --lx-primary-tint:      #E8EBFF;   /* active pill bg */
  --lx-primary-tint-2:    #E8F0FE;   /* arrow circle bg */
  --lx-primary-tint-3:    #EEF1FF;   /* soft chip / info bg */

  /* ---------- Dark / hero ---------- */
  --lx-ink-navy:        #060C51;     /* dark text on light accents */
  --lx-dark-surface:    #0b0e1c;     /* dark bands, player chrome */
  --lx-dark-surface-2:  #0d1228;
  --lx-hero-gradient:   linear-gradient(125deg, #070a16, #10162e, #1a2356);

  /* ---------- Accents ---------- */
  --lx-mint:          #1DE1BA;       /* hero CTA, success dots */
  --lx-mint-on-dark:  #88F0DA;       /* badges/links on dark */
  --lx-teal-deep:     #12856E;       /* check icons, teal icon fg */
  --lx-teal-deep-2:   #00876A;
  --lx-teal-bg:       #E0FFF9;       /* icon tiles */
  --lx-teal-bg-2:     #E0FBF4;
  --lx-purple:        #6052E3;       /* category accents */
  --lx-purple-2:      #9389F6;
  --lx-purple-3:      #3D52E5;
  --lx-purple-4:      #483DBA;
  --lx-purple-bg:     #F3F0FF;       /* icon tiles */
  --lx-amber:         #C2630B;
  --lx-amber-2:       #B45309;
  --lx-amber-bg:      #FFF1E8;       /* amber icon tile bg */
  --lx-star:          #FFB020;       /* rating stars */

  /* ---------- Neutrals ---------- */
  --lx-heading:       #1d1f25;
  --lx-label:         #3c4043;
  --lx-body:          #505967;
  --lx-muted:         #5f6368;
  --lx-faint:         #9098A0;
  --lx-page-bg:       #F7F8FB;
  --lx-page-bg-auth:  #FBFCFE;
  --lx-field-bg:      #F4F6FB;
  --lx-chip-bg:       #F6F7FB;
  --lx-chip-bg-2:     #F2F3F7;
  --lx-tabs-bg:       #EEF0F6;

  /* ---------- Borders ---------- */
  --lx-border-hairline: #ECEDF1;
  --lx-border:          #E4E5E9;
  --lx-border-2:        #E1E5EE;
  --lx-border-3:        #D8DAE2;
  --lx-border-strong:   #C9CCD6;

  /* ---------- Feedback ---------- */
  --lx-danger:      #E0245E;
  --lx-danger-bg:   #FFF0F4;
  --lx-danger-bg-2: #FFF5F8;
  --lx-info:        #1024DD;
  --lx-info-bg:     #EEF1FF;

  /* ---------- Typography ---------- */
  --lx-font-ar:     'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --lx-font-latin:  'Inter', system-ui, -apple-system, sans-serif;

  /* ---------- Radii ---------- */
  --lx-radius-pill:    999px;
  --lx-radius-course:  18px;
  --lx-radius-card:    22px;
  --lx-radius-card-lg: 24px;
  --lx-radius-field:   13px;
  --lx-radius-tile:    16px;
  --lx-radius-band:    28px;

  /* ---------- Shadows ---------- */
  --lx-shadow-card:      0 4px 16px rgba(0, 0, 0, .04);
  --lx-shadow-hover:     0 16px 40px rgba(16, 36, 221, .12);
  --lx-shadow-auth:      0 14px 50px rgba(11, 14, 28, .10);
  --lx-shadow-btn:       0 10px 24px rgba(16, 36, 221, .32);
  --lx-shadow-btn-hover: 0 14px 30px rgba(16, 36, 221, .40);
  --lx-focus-ring:       0 0 0 4px rgba(16, 36, 221, .12);

  /* ---------- Layout ---------- */
  --lx-maxw:         1180px;
  --lx-maxw-catalog: 1240px;

  /* ---------- Motion ---------- */
  --lx-transition:   .16s ease;
  --lx-hover-lift:   translateY(-3px);

  /*
   * ---------- Rotating palettes (consumed programmatically) ----------
   * Icon-tile [bg, fg] pairs, cycled across category/course cards:
   *   [--lx-primary-tint,  --lx-primary]    [--lx-teal-bg-2, --lx-teal-deep]
   *   [--lx-purple-bg,     --lx-purple]     [--lx-primary-tint, --lx-purple-3]
   *   [--lx-amber-bg,      --lx-amber]      [--lx-teal-bg-2, --lx-teal-deep-2]
   *   [--lx-purple-bg,     --lx-purple-4]   [--lx-amber-bg,  --lx-amber-2]
   */
  --lx-dot-1: #1024DD;
  --lx-dot-2: #6052E3;
  --lx-dot-3: #1DE1BA;
  --lx-dot-4: #3D52E5;
  --lx-dot-5: #9389F6;
  --lx-dot-6: #C2630B;
  --lx-dot-7: #12856E;
  --lx-dot-8: #483DBA;
}