/*
 * Reset, app shell layout and the shared control primitives.
 * Components everywhere else build on these tokens and base classes.
 */

@layer reset, base, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  svg { display: block; }
  a { color: var(--accent); }
}

@layer base {
  body {
    font: var(--fs-md)/var(--lh) var(--font-ui);
    color: var(--fg);
    background: var(--bg);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Visible focus is never removed without a replacement. */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
  }

  .hidden { display: none !important; }

  /* Numeric fields line up in columns. */
  input[type="number"], .num-input, .coords, .stats {
    font-variant-numeric: tabular-nums;
  }
}

@layer layout {
  .app {
    display: grid;
    height: 100%;
    grid-template-columns: var(--toolbar-w) minmax(0, 1fr) var(--panel-w);
    grid-template-rows: var(--menubar-h) var(--tooloptions-h) minmax(0, 1fr) var(--statusbar-h);
    grid-template-areas:
      "menubar     menubar menubar"
      "tooloptions tooloptions tooloptions"
      "toolbar     canvas  panels"
      "statusbar   statusbar statusbar";
    transition: grid-template-columns var(--speed) ease;
  }
  .app.panels-hidden { grid-template-columns: var(--toolbar-w) minmax(0, 1fr) 0; }
  .app.panels-hidden .panels { display: none; }

  .menubar { grid-area: menubar; }
  .tool-options { grid-area: tooloptions; }
  .toolbar { grid-area: toolbar; }
  .canvas-area { grid-area: canvas; }
  .panels { grid-area: panels; }
  .statusbar { grid-area: statusbar; }

  .canvas-area {
    position: relative;
    overflow: hidden;
    background: var(--canvas-bg);
  }
}

@layer components {
  /* ---- buttons ------------------------------------------------------- */
  button {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    cursor: default;
    color: var(--fg);
    transition: background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
  }
  button:hover { background: var(--bg-hover); }
  button:active { background: var(--bg-active); }
  button:disabled { opacity: 0.4; pointer-events: none; }

  /* A bordered, secondary button. */
  .btn, .btn-row button, .tool-options button, .align-grid button {
    background: var(--bg-panel);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-1);
  }
  .btn:hover, .btn-row button:hover, .tool-options button:hover, .align-grid button:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
  }
  .btn.active, .btn-row button.active, .tool-options button.active, .align-grid button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-accent);
    box-shadow: none;
  }

  .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-accent);
    font-weight: 500;
  }
  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

  .btn-danger { color: var(--danger); }
  .btn-danger:hover { background: var(--danger-soft); }

  /* ---- form controls ------------------------------------------------- */
  input[type="text"], input[type="number"], select, textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 3px 7px;
    min-width: 0;
    height: var(--ctl-h);
    color: var(--fg);
    transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
  }
  input[type="text"]:hover, input[type="number"]:hover, select:hover { border-color: var(--fg-dim); }
  input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
  }
  input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
  input.mixed, .mixed { color: var(--fg-dim); font-style: italic; }

  select {
    appearance: none;
    padding-right: 22px;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
      linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }

  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); margin: 0; }

  input[type="range"] { accent-color: var(--accent); height: var(--ctl-h); }

  /* ---- icons --------------------------------------------------------- */
  .icon { flex: none; }
  button .icon, .menu-item .icon, .tree-row .icon { pointer-events: none; }

  /* ---- scrollbars ---------------------------------------------------- */
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-pill);
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); background-clip: content-box; }
}