/* ============================================================
   Project Builder — design tokens (pb-)
   ------------------------------------------------------------
   Indigo shell + white cards + green stats.

   The palette follows two references: a college-portal layout
   (deep indigo hero/rails, white cards floating on a light
   neutral canvas) and studentenergy.org (generous whitespace,
   large green numeric stat tiles). Indigo carries structure;
   green is reserved for progress, stats and "complete" states,
   so a green thing on this surface always means the same thing.

   Constraints this file keeps:
     - variables are SCOPED to `.pb-scope` (not :root) so they
       never leak into or clash with Bootstrap globals on the
       shared base_app shell. Note `.pb-scope` lives inside
       {% block content %}, a sibling of `.app-sidebar` — these
       tokens deliberately cannot reach the platform nav.
     - prefixed `--pb-*` to avoid collisions with home_design's
       `--clay-*` / `--olive-*` names;
     - NO Google Fonts @import — self-host webfonts under
       ../webfonts/ later; until then the display/ui/mono stacks
       fall back to system fonts, keeping the page CSP-clean and
       free of any runtime third-party dependency.
   Component classes live in pb-hub.css / pb-wizard.css /
   pb-shell.css / pb-workspace.css.
   ============================================================ */

.pb-scope {
  /* Surfaces — cool neutrals so white cards read as raised */
  --pb-neutral-50:  #f7f8fa;
  --pb-neutral-100: #eef0f4;
  --pb-neutral-150: #e8ebf1;
  --pb-neutral-200: #e4e7ee;
  --pb-neutral-300: #d6dae4;
  --pb-neutral-400: #b9bfcd;

  /* Ink — slate ramp, navy at the dark end */
  --pb-ink-900:   #0f172a;
  --pb-ink-800:   #1e293b;
  --pb-ink-700:   #334155;
  --pb-ink-600:   #475569;
  --pb-ink-500:   #64748b;
  --pb-ink-400:   #94a3b8;
  --pb-ink-300:   #cbd5e1;

  /* Brand — indigo */
  --pb-indigo-900: #1e1b4b;
  --pb-indigo-800: #312e81;
  --pb-indigo-700: #3730a3;
  --pb-indigo-600: #4338ca;
  --pb-indigo-500: #4f46e5;
  --pb-indigo-400: #6366f1;
  --pb-indigo-300: #a5b4fc;
  --pb-indigo-200: #c7d2fe;
  --pb-indigo-100: #e0e7ff;
  --pb-indigo-50:  #eef2ff;

  /* Accents.
     Green = progress / stats / done. Gold + rose are NOT decorative:
     the completeness traffic lights (.pb-light--amber / --red) and the
     QA issue chips read them, and that gate is the product. Do not drop. */
  --pb-green-600: #22c55e;
  --pb-green-500: #16a34a;
  --pb-green-100: #dcfce7;
  --pb-gold-500:  #c8923a;
  --pb-gold-100:  #f3e6c8;
  --pb-rose-500:  #b04a55;
  --pb-rose-100:  #f4d8db;

  /* Teal — the wizard hero's gradient origin, and ONLY that.
     It is decorative: it sweeps into indigo behind the setup photo and
     frames the wizard card. Deliberately kept out of the semantic block
     below so no component can mistake it for a state — green already
     means "done" on this surface and a second success-ish colour would
     blunt it. */
  --pb-teal-500: #14b8a6;
  --pb-teal-400: #2ec9ad;
  --pb-teal-300: #5eead4;

  /* Semantic — component files should prefer these over the raw ramps */
  --pb-bg:            var(--pb-neutral-50);
  --pb-bg-elev:       #ffffff;
  --pb-bg-sunken:     var(--pb-neutral-100);
  --pb-border:        var(--pb-neutral-200);
  --pb-border-strong: var(--pb-neutral-300);
  --pb-text:          var(--pb-ink-900);
  --pb-text-muted:    var(--pb-ink-600);
  --pb-text-subtle:   var(--pb-ink-500);
  --pb-primary:       var(--pb-indigo-600);
  --pb-primary-hover: var(--pb-indigo-700);
  --pb-primary-soft:  var(--pb-indigo-100);

  /* Shell — the indigo hero/rail surfaces and the text that sits on them */
  --pb-shell:             var(--pb-indigo-800);
  --pb-shell-2:           var(--pb-indigo-900);
  --pb-shell-text:        var(--pb-indigo-100);
  --pb-shell-text-strong: #ffffff;

  /* Stats — the studentenergy numeric tiles */
  --pb-stat:    var(--pb-green-500);
  --pb-stat-bg: var(--pb-green-100);

  /* Type — system fallbacks until webfonts are vendored */
  --pb-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pb-font-ui:      'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --pb-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Radius */
  --pb-r-xs:  4px;
  --pb-r-sm:  6px;
  --pb-r-md:  10px;
  --pb-r-lg:  14px;
  --pb-r-xl:  20px;
  --pb-r-2xl: 28px;
  --pb-r-pill: 999px;

  /* Shadows */
  --pb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --pb-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.07);
  --pb-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.09), 0 16px 48px rgba(15, 23, 42, 0.07);
  --pb-shadow-indigo: 0 4px 16px rgba(67, 56, 202, 0.20);
}