/* ============================================================
   Design tokens — every value the navigation shell reads.
   Loaded BEFORE main.css so a component can still override a
   token locally, but nothing hard-codes a colour or a radius.

   Prefixed --ct- (clopr tokens) to stay clear of the older
   --primary-color / --shadow-* variables already in main.css,
   which remain in use by the page bodies.
   ============================================================ */

:root {
  /* ---- Surfaces -------------------------------------------
     app      = the canvas the floating cards sit on
     card     = the cards themselves (rail, panel, topbar)
     sunken   = inputs and wells inside a card
     overlay  = the scrim behind a drawer or a modal */
  --ct-surface-app:     #eef2f7;
  --ct-surface-card:    #ffffff;
  --ct-surface-sunken:  #f1f5f9;
  --ct-surface-hover:   #f8fafc;
  --ct-surface-overlay: rgba(15, 23, 42, 0.45);

  /* Frosted glass for the topbar. A flat colour is the fallback
     wherever backdrop-filter is unsupported. */
  --ct-surface-glass:   rgba(255, 255, 255, 0.78);
  --ct-glass-blur:      14px;

  /* ---- Text ---------------------------------------------- */
  --ct-text:         #0f172a;
  --ct-text-muted:   #64748b;
  --ct-text-subtle:  #94a3b8;
  --ct-text-invert:  #ffffff;

  /* ---- Borders ------------------------------------------- */
  --ct-border:        #e2e8f0;
  --ct-border-strong: #cbd5e1;

  /* ---- Brand --------------------------------------------- */
  --ct-brand:       #128C7E;
  --ct-brand-ink:   #0b5f55;
  --ct-brand-soft:  rgba(18, 140, 126, 0.10);
  --ct-brand-ring:  rgba(18, 140, 126, 0.28);

  /* ---- Semantic ------------------------------------------ */
  --ct-success:      #16a34a;
  --ct-success-soft: #dcfce7;
  --ct-warning:      #d97706;
  --ct-warning-soft: #fef3c7;
  --ct-danger:       #dc2626;
  --ct-danger-soft:  #fee2e2;
  --ct-info:         #2563eb;
  --ct-info-soft:    #dbeafe;

  /* ---- Radii --------------------------------------------- */
  --ct-radius-xs: 6px;
  --ct-radius-sm: 10px;
  --ct-radius-md: 14px;
  --ct-radius-lg: 18px;
  --ct-radius-pill: 999px;

  /* ---- Shadows -------------------------------------------
     The floating cards use --ct-shadow-card; raised surfaces
     (palette, dropdowns) use --ct-shadow-pop. */
  --ct-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --ct-shadow-pop:  0 12px 40px -8px rgba(15, 23, 42, 0.28);
  --ct-shadow-ring: 0 0 0 3px var(--ct-brand-ring);

  /* ---- Spacing ------------------------------------------- */
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 20px;
  --ct-space-6: 24px;

  /* ---- Layout -------------------------------------------
     The three-layer geometry. Changing --ct-rail-w or
     --ct-panel-w reflows the whole shell; nothing measures
     these independently. */
  --ct-rail-w:   64px;
  --ct-panel-w:  248px;
  --ct-topbar-h: 60px;
  --ct-gutter:   10px;     /* the gap that makes the cards look floating */

  /* ---- Motion -------------------------------------------- */
  --ct-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ct-fast:   120ms;
  --ct-normal: 200ms;
  --ct-slow:   320ms;

  /* ---- Elevation order ----------------------------------- */
  --ct-z-rail:    30;
  --ct-z-panel:   29;
  --ct-z-topbar:  28;
  --ct-z-scrim:   40;
  --ct-z-drawer:  50;
  --ct-z-palette: 60;
}

/* Honour a reduced-motion preference everywhere the shell animates. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ct-fast: 0ms;
    --ct-normal: 0ms;
    --ct-slow: 0ms;
  }
}