/**
 * shared.ts — Visual design system constants shared across multiple pages.
 *
 * ImageUploader.tsx and MaskEditor.tsx predate this file and inline their own
 * copies of these values — do not retroactively change those files.  New
 * components (QualityEnhance, tab bar in App.tsx) should import from here so
 * that future design tweaks only need to land in one place.
 */

import type React from "react";

// ---------------------------------------------------------------------------
// Typography
// ---------------------------------------------------------------------------

export const FONT_FAMILY =
  "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";

// ---------------------------------------------------------------------------
// Buttons — three-tier hierarchy
// ---------------------------------------------------------------------------

/** Solid blue — primary action (e.g. submit, start processing). */
export const btnPrimary: React.CSSProperties = {
  display:       "inline-flex",
  alignItems:    "center",
  gap:           6,
  padding:       "8px 18px",
  background:    "#3b82f6",
  border:        "none",
  borderRadius:  7,
  cursor:        "pointer",
  fontSize:      14,
  fontWeight:    600,
  color:         "#fff",
  letterSpacing: "-0.01em",
  boxShadow:     "0 1px 3px rgba(59,130,246,0.25)",
};

/** White with border — secondary action (e.g. Download). */
export const btnSecondary: React.CSSProperties = {
  display:      "inline-flex",
  alignItems:   "center",
  gap:          6,
  padding:      "7px 14px",
  background:   "#fff",
  border:       "1px solid #d1d5db",
  borderRadius: 7,
  cursor:       "pointer",
  fontSize:     14,
  fontWeight:   500,
  color:        "#374151",
  boxShadow:    "0 1px 2px rgba(0,0,0,0.05)",
};

/** Transparent — ghost / low-emphasis action (e.g. Start Over). */
export const btnGhost: React.CSSProperties = {
  display:      "inline-flex",
  alignItems:   "center",
  gap:          6,
  padding:      "7px 12px",
  background:   "transparent",
  border:       "1px solid #e5e7eb",
  borderRadius: 7,
  cursor:       "pointer",
  fontSize:     13,
  color:        "#6b7280",
};

// ---------------------------------------------------------------------------
// Page container
// ---------------------------------------------------------------------------

export const pageContainer = (maxWidth = 680): React.CSSProperties => ({
  maxWidth,
  margin:     "48px auto 48px",
  padding:    "0 24px",
  fontFamily: FONT_FAMILY,
  color:      "#111827",
});