/*
 * SiamUtils Design Tokens — from the 2026 redesign handoff (DESIGN_RULES.md §2).
 * Single source of truth for colour/type/radius/spacing values used by any NEW page
 * built against the redesign. Existing pages keep their current Tailwind indigo theme
 * until they're individually migrated — this file is additive, nothing here overrides
 * existing classes globally.
 *
 * Usage: include this file, then either use the CSS custom properties directly
 * (e.g. `color: var(--ink)`) or the Tailwind token config in
 * views/partials/design-tokens-tailwind.ejs which maps these to utility classes
 * (bg-ink, text-muted, etc).
 */

:root {
  /* Colours */
  --ink: #15181b;
  --bg: #f4f5f6;
  --surface: #ffffff;
  --line: #dfe2e5;
  --divider: #eef0f2;
  --muted: #555b61;
  --subtle: #8b9096;
  --disabled: #b8bdc2;
  --panel: #22262a;
  --panel-border: #30353a;
  --accent: oklch(0.5 0.11 210);
  --accent-on-dark: oklch(0.72 0.11 210);
  --local: oklch(0.58 0.12 155);
  --upload: oklch(0.66 0.12 75);
  --account: oklch(0.55 0.11 210);
  --error: oklch(0.58 0.18 25);
  --line-brand: #06C755; /* LINE buttons only */

  /* State tints (bg / text pairs) */
  --success-bg: oklch(0.96 0.03 155);
  --success-text: oklch(0.38 0.1 155);
  --warning-bg: oklch(0.97 0.03 75);
  --warning-text: oklch(0.4 0.09 60);
  --error-bg: oklch(0.96 0.03 25);
  --error-text: oklch(0.45 0.14 25);

  /* Radius */
  --radius-sm: 6px;   /* small inputs/buttons */
  --radius-md: 8px;   /* chips/tabs */
  --radius-lg: 10px;  /* buttons, icons */
  --radius-xl: 14px;  /* cards (12-16 range) */
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 56px;

  /* Layout */
  --container-wide: 1240px;  /* Home/Services */
  --container-normal: 1200px; /* other pages */
  --container-pad: 24px;

  /* Shadow — used only on the mobile FAB, per DESIGN_RULES.md §2 */
  --shadow-fab: 0 8px 24px rgba(21, 24, 27, .25);
}

/* Anuphan (body/UI text) + JetBrains Mono (monograms, prices, timers, mono labels) —
   load once via this file so every redesigned page shares the same font requests
   instead of duplicating <link> tags with slightly different weight subsets. */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

.font-mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* Tool icon — 44x44 ink square, radius 10, 2-3 mono letters. No emoji, no new SVGs
   (DESIGN_RULES.md §3). */
.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Privacy badge — coloured square dot + label. Only 3 types exist: local/upload/account. */
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--muted);
}
.privacy-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.privacy-badge.local .dot { background: var(--local); }
.privacy-badge.upload .dot { background: var(--upload); }
.privacy-badge.account .dot { background: var(--account); }

/* Buttons — one primary per step (DESIGN_RULES.md §3) */
.btn-primary {
  background: var(--ink);
  color: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.btn-primary:disabled {
  background: var(--disabled);
  cursor: not-allowed;
}
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.btn-text {
  background: transparent;
  color: var(--muted);
  border: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

/* Alert box — state tints only, never a left-border accent (DESIGN_RULES.md §3) */
.alert-box {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-size: 14px;
}
.alert-box.success { background: var(--success-bg); color: var(--success-text); }
.alert-box.warning { background: var(--warning-bg); color: var(--warning-text); }
.alert-box.error   { background: var(--error-bg); color: var(--error-text); }

/* Dropzone — dashed border, must be paired with copy stating file types/size/time */
.dropzone {
  border: 1.5px dashed #c9ced3;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

/* Step bar — 3 columns, numbered circles, 2px ink underline on active step */
.step-bar { display: flex; gap: var(--space-8); }
.step-bar .step { display: flex; align-items: center; gap: var(--space-2); color: var(--subtle); font-size: 14px; font-weight: 600; padding-bottom: var(--space-2); border-bottom: 2px solid transparent; }
.step-bar .step.active { color: var(--ink); border-bottom-color: var(--ink); }
.step-bar .step.done { color: var(--muted); }
.step-bar .step .circle { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; }