/* Public Lighting Builder - base design for mockups and apps.
   Copy into docs/ui/ (mockups) and into the frontend (apps) so every project looks consistent.
   Adjust only the brand tokens if the user asks for different colours. */

:root {
  /* brand */
  --c-primary: #0e6e73;      /* teal: primary actions */
  --c-primary-ink: #ffffff;
  --c-accent: #f5a623;       /* amber: highlights, "lamp light" */
  --c-navy: #102a43;         /* headers, navigation */

  /* status */
  --c-ok: #1f8a5b;
  --c-warn: #b9770e;
  --c-error: #c0392b;
  --c-info: #2e6da4;

  /* surfaces (light) */
  --c-bg: #f4f7fa;
  --c-card: #ffffff;
  --c-line: #dce4ea;
  --c-text: #1f2a33;
  --c-text-2: #5e6e7a;

  /* type and spacing */
  --font: "Microsoft JhengHei", "PingFang HK", "Noto Sans TC", "Segoe UI", system-ui, sans-serif;
  --fs-title: 22px;
  --fs-body: 15px;
  --fs-small: 13px;
  --radius: 12px;
  --space: 8px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0e1316;
    --c-card: #172026;
    --c-line: #2a363e;
    --c-text: #eef3f5;
    --c-text-2: #93a4ae;
    --c-primary: #1c9c97;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); color: var(--c-text); background: var(--c-bg); line-height: 1.5; }

.topbar { background: var(--c-navy); color: #fff; padding: calc(var(--space) * 1.5) calc(var(--space) * 3); display: flex; align-items: center; gap: calc(var(--space) * 2); }
.topbar .title { font-weight: 700; font-size: 18px; }
.topbar nav a { color: #cfe0ec; text-decoration: none; margin-right: calc(var(--space) * 2); }
.topbar nav a.active { color: #fff; border-bottom: 2px solid var(--c-accent); }

.page { max-width: 1200px; margin: 0 auto; padding: calc(var(--space) * 3); }
h1 { font-size: var(--fs-title); margin: 0 0 calc(var(--space) * 2); }

.card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: calc(var(--space) * 2.5); margin-bottom: calc(var(--space) * 2); }
.grid { display: grid; gap: calc(var(--space) * 2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpi .label { color: var(--c-text-2); font-size: var(--fs-small); }
.kpi .value { font-size: 28px; font-weight: 700; }

.btn { display: inline-block; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; cursor: pointer; text-decoration: none; min-height: 44px; }
.btn-primary { background: var(--c-primary); color: var(--c-primary-ink); }
.btn-secondary { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn-danger { background: var(--c-error); color: #fff; }

table { width: 100%; border-collapse: collapse; background: var(--c-card); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-line); }
th { color: var(--c-text-2); font-weight: 600; font-size: var(--fs-small); }
.table-wrap { overflow-x: auto; }

label { display: block; font-size: var(--fs-small); color: var(--c-text-2); margin-bottom: 4px; }
input, select, textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-card); color: var(--c-text); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; }
.badge-ok { background: color-mix(in srgb, var(--c-ok) 15%, transparent); color: var(--c-ok); }
.badge-warn { background: color-mix(in srgb, var(--c-warn) 15%, transparent); color: var(--c-warn); }
.badge-error { background: color-mix(in srgb, var(--c-error) 15%, transparent); color: var(--c-error); }

.mock-note { background: #fff4de; color: #5e4a1a; border: 1px dashed var(--c-accent); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-small); margin-bottom: calc(var(--space) * 2); }