/* Planqix design tokens — shared across website, editor, viewer, auth.
   Load this first; all other stylesheets reference these variables. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Surfaces (dark, default) ── */
  --bg:      #0d0e10;
  --surf:    #15171b;
  --surf2:   #1c1f26;
  --border:  #272b33;
  --border2: #32373f;

  /* ── Text (dark) ── */
  --text:  #e4e6ed;
  --text2: #888ea0;
  --text3: #4e5567;

  /* ── Brand (editor blue) ── */
  --accent:       #4f9cf9;
  --accent-hover: #3b87e8;
  --accent2:      #7c5cfc;
  --accent-soft:  rgba(79, 156, 249, 0.12);
  --accent-tint:  rgba(79, 156, 249, 0.22);
  --accent-glow:  rgba(79, 156, 249, 0.35);

  /* ── Status ── */
  --success: #22c55e;
  --warn:    #f5a623;
  --danger:  #f0506e;
  --green:   #34d399;

  /* ── Radii ── */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* ── Shadows (dark) ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.55);

  /* ── Typography ── */
  --ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Syne', 'Inter', system-ui, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Misc ── */
  --overlay-bg: rgba(13, 14, 16, 0.93);
}

/* ── Light (lite) mode overrides ── */
html.lite {
  --bg:      #f0f3f8;
  --surf:    #ffffff;
  --surf2:   #e8ecf3;
  --border:  #d3d9e8;
  --border2: #b8c2d4;

  --text:  #0f1629;
  --text2: #475470;
  --text3: #8b96b0;

  --shadow-sm: 0 1px 3px rgba(30, 40, 80, 0.08);
  --shadow:    0 8px 24px rgba(30, 40, 80, 0.10);
  --shadow-lg: 0 8px 40px rgba(30, 40, 80, 0.12), 0 2px 8px rgba(30, 40, 80, 0.07);

  --overlay-bg: rgba(220, 226, 238, 0.92);

  color-scheme: light;
}

html { font-size: 16px; }
body { font-family: var(--ui); color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}