/*
 * ================================================================
 * KOMPEA DESIGN TOKENS  —  css/tokens.css
 * ================================================================
 * THE ONLY FILE TO EDIT WHEN RETHEMING.
 *
 * Layer 1: Primitives  — raw palette, never used directly
 * Layer 2: Semantics   — purpose-named aliases
 * Layer 3: Components  — scoped per-component overrides
 * ================================================================
 */

:root {

  /* --------------------------------------------------------------
   * 1. PRIMITIVES
   * ------------------------------------------------------------ */

  /* Navy */
  --p-navy-950: #05080f;
  --p-navy-900: #0b1120;
  --p-navy-800: #101c35;
  --p-navy-700: #162547;
  --p-navy-600: #1e3260;
  --p-navy-500: #274080;

  /* Green — Kompea brand */
  --p-green-900: #052e16;
  --p-green-800: #064e25;
  --p-green-700: #0a6b33;
  --p-green-600: #1a8a43;   /* ← primary brand green (kompea.pl match) */
  --p-green-500: #22a550;
  --p-green-400: #3bbf67;
  --p-green-300: #6dd18c;
  --p-green-200: #a7ebbe;
  --p-green-100: #d1f7df;
  --p-green-50:  #edfaf2;

  /* Lime — accent */
  --p-lime-500: #84cc16;
  --p-lime-400: #a3e635;
  --p-lime-100: #ecfccb;
  --p-lime-50:  #f7fee7;

  /* Neutral */
  --p-white:      #ffffff;
  --p-gray-50:    #f8fafc;
  --p-gray-100:   #f1f5f9;
  --p-gray-200:   #e2e8f0;
  --p-gray-300:   #cbd5e1;
  --p-gray-400:   #94a3b8;
  --p-gray-500:   #64748b;
  --p-gray-600:   #475569;
  --p-gray-700:   #334155;
  --p-gray-800:   #1e293b;
  --p-gray-900:   #0f172a;

  /* Feedback */
  --p-green-600:  #16a34a;
  --p-green-500:  #22c55e;
  --p-green-100:  #dcfce7;
  --p-amber-600:  #d97706;
  --p-amber-500:  #f59e0b;
  --p-amber-100:  #fef3c7;
  --p-red-600:    #dc2626;
  --p-red-500:    #ef4444;
  --p-red-100:    #fee2e2;

  /* --------------------------------------------------------------
   * 2. SEMANTIC TOKENS
   * ------------------------------------------------------------ */

  /* Surfaces */
  --color-bg:            var(--p-white);
  --color-bg-subtle:     var(--p-gray-50);
  --color-bg-muted:      var(--p-gray-100);
  --color-bg-dark:       var(--p-navy-900);
  --color-bg-darker:     var(--p-navy-950);

  /* Borders */
  --color-border-subtle: var(--p-gray-100);
  --color-border:        var(--p-gray-200);
  --color-border-strong: var(--p-gray-300);
  --color-border-dark:   rgba(255,255,255,0.08);
  --color-border-focus:  var(--p-blue-500);

  /* Text */
  --color-text:          var(--p-gray-900);
  --color-text-2:        var(--p-gray-600);
  --color-text-muted:    var(--p-gray-400);
  --color-text-disabled: var(--p-gray-300);
  --color-text-inverse:  var(--p-white);
  --color-text-on-dark:  var(--p-gray-400);
  --color-text-link:     var(--p-blue-500);
  --color-text-link-h:   var(--p-blue-700);

  /* Brand */
  --color-brand:         var(--p-green-600);
  --color-brand-h:       var(--p-green-700);
  --color-brand-subtle:  var(--p-green-50);
  --color-brand-muted:   var(--p-green-100);

  /* Accent */
  --color-accent:        var(--p-lime-500);
  --color-accent-h:      var(--p-lime-400);

  /* Feedback */
  --color-ok:            var(--p-green-500);
  --color-ok-bg:         var(--p-green-100);
  --color-warn:          var(--p-amber-500);
  --color-warn-bg:       var(--p-amber-100);
  --color-err:           var(--p-red-500);
  --color-err-bg:        var(--p-red-100);

  /* LearnDash status */
  --color-ld-pass:       var(--p-green-500);
  --color-ld-fail:       var(--p-red-500);
  --color-ld-progress:   var(--p-green-600);
  --color-ld-complete:   var(--p-green-700);
  --color-ld-locked:     var(--p-gray-400);

  /* Header — dark green brand bar */
  --header-h:            64px;
  --header-bg:           var(--p-green-600);
  --header-bg-scroll:    var(--p-green-700);
  --header-border:       var(--p-green-700);
  --header-blur:         none;   /* solid colour, no blur needed */
  --header-text:         rgba(255,255,255,0.92);
  --header-text-hover:   #ffffff;
  --header-text-active:  #ffffff;
  --header-active-bg:    rgba(255,255,255,0.12);

  /* --------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------ */
  --font-sans:  'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */

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

  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.03em;
  --ls-snug:   -0.02em;
  --ls-normal: -0.01em;
  --ls-wide:    0.02em;
  --ls-caps:    0.08em;

  /* --------------------------------------------------------------
   * Spacing
   * ------------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* --------------------------------------------------------------
   * Radii
   * ------------------------------------------------------------ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* --------------------------------------------------------------
   * Shadows
   * ------------------------------------------------------------ */
  --sh-xs:    0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:    0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --sh-lg:    0 12px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --sh-xl:    0 24px 48px rgba(0,0,0,0.12);
  --sh-focus: 0 0 0 3px rgba(26,99,245,0.25);
  --sh-brand: 0 4px 16px rgba(26,99,245,0.3);

  /* --------------------------------------------------------------
   * Motion
   * ------------------------------------------------------------ */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    100ms;
  --dur-default: 180ms;
  --dur-slow:    300ms;

  --tx:          var(--dur-default) var(--ease);
  --tx-slow:     var(--dur-slow) var(--ease);

  /* --------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------ */
  --max-w:      1280px;
  --content-w:  800px;
  --sidebar-w:  280px;
  --gutter:     var(--sp-6);
  --section-py: var(--sp-20);

  /* --------------------------------------------------------------
   * Z-index
   * ------------------------------------------------------------ */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;

  /* --------------------------------------------------------------
   * 3. COMPONENT TOKENS
   * ------------------------------------------------------------ */

  /* Button */
  --btn-h-sm:   34px;
  --btn-h-md:   42px;
  --btn-h-lg:   50px;
  --btn-px-sm:  var(--sp-4);
  --btn-px-md:  var(--sp-5);
  --btn-px-lg:  var(--sp-8);
  --btn-r:      var(--r-md);
  --btn-sz:     var(--text-sm);
  --btn-fw:     var(--fw-semibold);

  /* Input */
  --input-h:  42px;
  --input-px: var(--sp-4);
  --input-r:  var(--r-md);

  /* Card */
  --card-p:  var(--sp-6);
  --card-r:  var(--r-xl);

  /* Progress */
  --prog-h:  6px;

  /* Course grid columns */
  --cols: 3;
}