/* ============================================================================
   AppSite shared design tokens — SINGLE SOURCE OF TRUTH for classic (public/)
   module apps. Values mirror
   -appsitetm_template_apphosting/webapp/app/design-tokens.css (the Next.js
   modules' SoT) so classic apps and Next.js modules render one identical palette:
   navy background + cyan accent.

   Served at https://gallery-appsite.web.app/shared/design-tokens.css and imported
   by shared/layout.css. To rebrand the whole classic platform, edit ONLY this
   file and redeploy gallery. Never hardcode palette colors in module CSS —
   reference these tokens.
   ========================================================================== */
:root {
  --sidebar-w:          220px;
  --sidebar-collapsed-w:36px;

  --bg-base:            hsl(220, 20%, 4%);
  --bg-surface:         hsl(220, 18%, 7%);
  --bg-elevated:        hsl(220, 15%, 13%);
  --border:             hsl(220, 14%, 18%);

  --text-primary:       hsl(210, 20%, 92%);
  --text-muted:         hsl(218, 12%, 66%);
  --text-subtle:        hsl(214, 15%, 84%);

  --accent:             hsl(192, 85%, 55%);   /* cyan — primary interactive */
  --accent-hover:       hsl(192, 85%, 45%);
  --accent-foreground:  hsl(220, 26%, 10%);   /* readable text ON cyan */
  --accent-10:          hsla(192, 85%, 55%, 0.14);

  --success:            #22c55e;
  --warning:            #f59e0b;
  --danger:             #ef4444;
  --danger-hover:       #dc2626;
  --danger-10:          hsla(0, 84%, 60%, 0.14);

  --shadow:             0 8px 24px hsla(220, 60%, 2%, 0.55);

  /* Legacy alias tokens referenced by some module apps (gallery, etc.) — mapped
     onto the canonical palette so no reference resolves to an undefined value. */
  --clay:               var(--accent);          /* legacy brand accent → cyan */
  --muted-foreground:   var(--text-muted);
  --text-dim:           var(--text-muted);
  --text-faint:         hsl(218, 12%, 50%);     /* fainter than --text-muted */
}