/* ============================================================
 * Moara Design System — Tokens (Studio Moara brand)
 *
 * Distilled from the Moara design bundle (chats/, project/README.md,
 * project/colors_and_type.css) to apply Studio Moara's visual language
 * to Deki2's internal tool surface. Source brand sits in the Moara
 * Project web app (Next.js + Tailwind v4 + shadcn/ui).
 *
 * Imported FIRST in base.html so every other stylesheet can build on
 * these variables. Loaded via /static/moara-tokens.css.
 * ============================================================ */

:root {
  /* -------- NEUTRAL SCALE -------- */
  --moara-white:    #ffffff;
  --moara-gray-50:  #fafafa;
  --moara-gray-100: #f5f5f5;
  --moara-gray-200: #e5e5e5;
  --moara-gray-300: #d4d4d4;
  --moara-gray-400: #9ca3af;
  --moara-gray-500: #6b7280;
  --moara-gray-600: #4b5563;
  --moara-gray-700: #374151;
  --moara-gray-800: #1f2937;
  --moara-gray-900: #18181b;

  /* -------- BRAND ORANGE (hsl 24.6 95% L) -------- */
  --moara-brand-50:  #fef3ed;
  --moara-brand-100: #fde2cf;
  --moara-brand-300: #fbb074;
  --moara-brand-500: #f97316;   /* primary CTA, active text, focus ring */
  --moara-brand-600: #d35b08;   /* primary press, brand wordmark accent */
  --moara-brand-700: #8a3c05;

  /* -------- STATUS PALETTE (semantic — do not remix) -------- */
  --moara-status-pending:  #9ca3af;  /* gray-400 */
  --moara-status-build:    #3b82f6;  /* blue-500 — building */
  --moara-status-queue:    #8b5cf6;  /* purple-500 — queued / ready */
  --moara-status-upload:   #6366f1;  /* indigo-500 */
  --moara-status-warn:     #ef4444;  /* red-500 — revision */
  --moara-status-done:     #10b981;  /* green-500 — approved / done */
  --moara-status-error:    #b91c1c;  /* red-700 — rejected / error */
  --moara-status-archive:  #334155;  /* slate-700 */

  /* -------- ICON-TILE WASHES (always paired wash + same-hue 600 icon) -------- */
  --moara-wash-orange-bg:  #fef3ed;  --moara-wash-orange-fg:  #d35b08;
  --moara-wash-red-bg:     #fef2f2;  --moara-wash-red-fg:     #b91c1c;
  --moara-wash-blue-bg:    #eff6ff;  --moara-wash-blue-fg:    #1d4ed8;
  --moara-wash-pink-bg:    #fdf2f8;  --moara-wash-pink-fg:    #be185d;
  --moara-wash-purple-bg:  #faf5ff;  --moara-wash-purple-fg:  #7e22ce;
  --moara-wash-teal-bg:    #f0fdfa;  --moara-wash-teal-fg:    #0f766e;
  --moara-wash-green-bg:   #f0fdf4;  --moara-wash-green-fg:   #15803d;

  /* -------- CHART CATEGORICAL (7-step) -------- */
  --moara-chart-1: #f59e0b;   /* amber-500 */
  --moara-chart-2: #10b981;   /* emerald-500 */
  --moara-chart-3: #3b82f6;   /* blue-500 */
  --moara-chart-4: #ec4899;   /* pink-500 */
  --moara-chart-5: #8b5cf6;   /* violet-500 */
  --moara-chart-6: #06b6d4;   /* cyan-500 */
  --moara-chart-7: #f43f5e;   /* rose-500 */

  /* -------- SEMANTIC ROLES -------- */
  --moara-background:         var(--moara-gray-50);  /* app shell */
  --moara-surface:            var(--moara-white);    /* cards, content */
  --moara-foreground:         var(--moara-gray-900);
  --moara-muted:              var(--moara-gray-100);
  --moara-muted-foreground:   var(--moara-gray-500);
  --moara-border:             var(--moara-gray-200);
  --moara-border-soft:        var(--moara-gray-100);
  --moara-primary:            var(--moara-brand-500);
  --moara-primary-press:      var(--moara-brand-600);
  --moara-primary-fg:         var(--moara-white);
  --moara-accent-bg:          var(--moara-brand-50);
  --moara-accent-fg:          var(--moara-brand-600);
  --moara-ring:               var(--moara-gray-400);

  /* -------- TYPOGRAPHY -------- */
  --moara-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --moara-font-mono: ui-monospace, "Geist Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Scale — observed across the source app. */
  --moara-text-micro:   9px;
  --moara-text-mini:    10px;   /* THE signature micro-label size */
  --moara-text-eyebrow: 11px;
  --moara-text-xs:      12px;
  --moara-text-sm:      13px;
  --moara-text-base:    14px;   /* default body */
  --moara-text-md:      16px;
  --moara-text-lg:      18px;
  --moara-text-xl:      20px;   /* page title */
  --moara-text-2xl:     24px;
  --moara-text-3xl:     30px;   /* KPI hero */
  --moara-text-4xl:     36px;
  --moara-text-5xl:     48px;

  --moara-leading-tight:  1.2;
  --moara-leading-snug:   1.35;
  --moara-leading-normal: 1.55;

  --moara-tracking-tight:  -0.015em;
  --moara-tracking-wide:    0.025em;
  --moara-tracking-wider:   0.05em;
  --moara-tracking-widest:  0.1em;

  /* -------- RADII (10px base) -------- */
  --moara-radius-sm:  6px;
  --moara-radius-md:  8px;
  --moara-radius-lg:  10px;   /* default (buttons) */
  --moara-radius-xl:  14px;   /* cards */
  --moara-radius-2xl: 18px;
  --moara-radius-3xl: 22px;
  --moara-radius-pill: 999px;

  /* -------- SHADOWS (soft, no colored) -------- */
  --moara-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --moara-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10),
                      0 2px 4px -2px rgb(0 0 0 / 0.10);
  --moara-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10),
                      0 4px  6px -4px rgb(0 0 0 / 0.10);
  --moara-shadow-2xl: 0 25px 50px -12px rgb(229 231 235 / 0.50);

  /* -------- LAYOUT GRID -------- */
  --moara-header-h:           56px;
  --moara-sidebar-w:          240px;
  --moara-sidebar-w-collapsed: 64px;
  --moara-content-max:        1400px;
}